首先webpack多模块与单模块的区别就是多模块是多个入口文件,单模块是单个入口文件。
入口文件写法 entry:
单模块写法: entry: { app: './src/main.js' } 或者 entry: './src/main.js';
多模块写法: entry: {app: './src/ app.js', main: './src/main.js'} 或者 entry: ['./src/app.js', './src/main.js']
文件输出目录 output:
output配置参数
1.path: 指本地调试或者打包以后的服务器的根目录。可以是相对路径也可以是绝对路径。\
2.publicpath: 所有输出的文件都会被打包到这个路径。如果没有默认为path根目录。 \
3.filename: 入口js文件输出的路径(这个路径是相对与path与publicPath路径结合以后的路径)。\
4.chunkFilename: webpack针对不同的模块进行js代码分割以后的文件的输出路径\
resolve配置参数 //创建 import 或 require 的别名,来确保模块引入变得更简单。
1.extensions: ['.js', '.vue'] // 自动解析的文件拓展名。 本例 引入 js文件或者 vue文件时文件扩展名可以省略;\
2.alias:{ vue$:‘vue/dist/vue.esm.js', @assets: './src/module.assets' } //给插件或者是路径定义别名。在模块中引入vue就是引入的vue/dist/vue.esm.js 文件。\
在路径中@asssets就代表 './src/module.assets'
devtool: 配置是否生成source-map文件
module模块配置
module.rules: [] // loader配置 数组 在 webpack 1 的这个配置项是module.loaders
plugins:[]插件配置