项目目录如下：

一、webpack.config.js的配置

首先，在项目目录下新建webpack.config.js文件：

module.exports = {
    // 入口文件，一个或多个
    entry: {
        // "main" 为自定义
        "main": './main.js'  
    },
    // 出口文件
    output: {
        filename: './build.js'
    },
    // 文件监视改动，自动产出build.js
    watch: true
}

其他文件源码如下：

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>

    <!-- <script src="./vue.js"></script> -->
    <!-- build.js为webpack打包后的文件 -->
    <script src="./build.js"></script>
</body>
</html>

main.js：

// esModule语法
// 引入vue.js
import Vue from './vue.js'
// 引入app组件模块
// import App from './App.js'
// import {num1, num2, add} from './App.js'

// console.log(num1, num2);
// add(2, 7);

import * as obj from './App.js'

console.log(obj);
console.log(obj.num1, obj.num2);
obj.add(2, 7);

new Vue({
    el: '#app',
    components: {
        App: obj.default
    },
    template: `
        <App />
    `
});

App.js：

var app = {
    template:`
        <div>我是一个入口组件</div>
    `
};

// 导出app对象
export default app;

// 声明并导出
export var num1 = 0;

// 先声明再导出
var num2 = 5;
export {num2};

// 导出函数
export function add(x, y) {
    return console.log( x + y);
}

终端执行：webpack，会自动查找webpack.config.js，build.js成功编译，并且编译完成后命令并未退出，而是保持watch状态。此时，修改App.js中的代码后，直接刷新页面即可，无需再次在终端执行webpack编译命令。

在package.json中配置scripts脚本：

"scripts": {
    "build": "webpack"
  },

 终端执行npm run build可成功编译。注意：scripts脚本中webpack后面不跟wenpack.config.js，否则会报错：

ERROR in ./node_modules/_clean-css@4.2.3@clean-css/lib/reader/read-sources.js
Module not found: Error: Can't resolve 'fs' in 'E:\kaikevue\02webpack-dev-server\node_modules\_clean-css@4.2.3@clean-css\lib\reader'
 @ ./node_modules/_clean-css@4.2.3@clean-css/lib/reader/read-sources.js 1:9-22
 @ ./node_modules/_clean-css@4.2.3@clean-css/lib/clean.js
 @ ./node_modules/_clean-css@4.2.3@clean-css/index.js
 @ ./node_modules/_html-minifier@3.5.21@html-minifier/src/htmlminifier.js
 @ ./node_modules/_html-webpack-plugin@2.30.1@html-webpack-plugin/index.js
 @ ./webpack.config.js
 @ multi ./main.js ./webpack.config.js

ERROR in ./node_modules/_clean-css@4.2.3@clean-css/lib/reader/apply-source-maps.js
Module not found: Error: Can't resolve 'fs' in 'E:\kaikevue\02webpack-dev-server\node_modules\_clean-css@4.2.3@clean-css\lib\reader'
 @ ./node_modules/_clean-css@4.2.3@clean-css/lib/reader/apply-source-maps.js 1:9-22
 @ ./node_modules/_clean-css@4.2.3@clean-css/lib/reader/read-sources.js
 @ ./node_modules/_clean-css@4.2.3@clean-css/lib/clean.js
 @ ./node_modules/_clean-css@4.2.3@clean-css/index.js
 @ ./node_modules/_html-minifier@3.5.21@html-minifier/src/htmlminifier.js
 @ ./node_modules/_html-webpack-plugin@2.30.1@html-webpack-plugin/index.js
 @ ./webpack.config.js
 @ multi ./main.js ./webpack.config.js
................

 二、自定义配置文件webpack.dev.config.js、webpack.pro.config.js

 新建开发配置文件 webpack.dev.config.js：

module.exports = {
    entry: {
        "main": "./main.js"
    },
    output: {
        filename: "./build.js"
    },
    watch: true
}

 新建生产配置文件，不需要watch监听变化， webpack.pro.config.js：

module.exports = {
    entry: {
        "main": "./main.js"
    },
    output: {
        filename: "./build.js"
    }
}

终端执行：webpack --config webpack.dev.config.js，按照webpack.dev.config.js配置文件自动编译；

终端执行：webpack --config webpack.pro.config.js，按照webpack.pro.config.js配置文件自动编译，编译完成自动退出。

在package.json中配置scripts脚本：

"scripts": {
    "dev": "webpack --config webpack.dev.config.js",
    "pro": "webpack --config webpack.pro.config.js"
  },

终端执行npm run dev或者npm run pro可成功编译。

# webpack
Logo
智屏生态联盟

智屏生态联盟致力于大屏生态发展，利用大屏快应用技术降低开发者开发、发布大屏应用门槛

更多推荐

taro 引用本地图片展示

import { Image } from ‘@tarojs/components’<引用标签>constructor(){super()this.state={img:require(’./case.png’)}}…

avatar 智屏生态联盟

Weex

Weex 是一个可以使用现代化的 Web 技术开发高性能原生应用的框架。快速开始高性能Weex 使用原生组件和原生模块，来最大化利用原生渲染的性能优势以及平台能力，所有的组件和模块都是可插拔、可扩展的。跨平台你可以使用同一份代码编译成不同目标文件分别在 Web、Android 和 iOS 平台上运行。原生的组件和模块在不同平台中有不同的实现，但是它们都提供了相同的...

avatar 智屏生态联盟

Taro写小程序总结

1.首先需要在『微信公众平台』注册帐号，我一直很困惑为啥，微信公众平台不能和微信开放平台整合，而且账号不能通用~https://mp.weixin.qq.com2.在微信公从平台里的->开发->服务器域名,可以配置小程序中可以访问的接口的域名3.在『成员管理』中可以添加开发者、体验者等成员。方便协作办工Taro的一些例子：1.转发在render中写&...

avatar 智屏生态联盟