一：新建配置文件
1.配置文件名
默认为webpack.config.js，可以为其它名字，但这时启动webpack要加参数--config来指定配置文件，如 webpack --config abc.config.js
2.配置文件目录
默认为项目根目录，一般会放到./build文件夹下
提示: 当配置文件在根目录下，且配置文件名为 webpack.config.js，这两个条件都满足时，可以省略--config参数来启动webpack或wepack dev server
3.配置文件格式
最终输出一个对象 module.exports={...} ，这种最常用
最终输出一个函数
最终输出一个Promise
最终输出多项配置
3.1 第1种：输出为一个对象
格式为
module.exports={...}
这个最常用，下面会就对象中的各个部分详细讲解
3.2 第2种：输出为一个函数
参考: https://webpack.js.org/config...
module.exports =function(env,arg){return{ ... }}
说明1. 返回值必须是一个对象
说明2. 函数有2个参数分别为env和arg,env为执行webpack时带入的，如 D:\03www2018\study\webpack2017>webpack --env prod，这时的env值就为prod，如果没有带参数--env，那么函数中得到的env为undefined。webpack命令行时可用的参数一共有94个，除了--env外的93个都放在第二个参数arg中了，它是一个对象，如果执行webpack命令时没有指定其它参数，那么它的值就是webpack给它的默认值
说明3：参数--env的格式与在webpack.config.js中输出函数中env参数之间的关系
说明4: 如果参数不在webpack的默认范围内，如 webpack --wang=haha --env=prod会报错Unknown argument: wang
说明5:
如根目录>webpack --progress true --watch true --env prod，这样得到的参数env的值为pro，参数arg的值为
{... watch:true,... progress:true,...}
3.3 第3种：输出为一个Promise
参考官方文档 https://webpack.js.org/config...
当需要异步加载配置文件时，得将配置文件输出为一个Promise,如
module.exports =()=>{returnnewPromise((resolved,rejected)=>{ settimeout(()=>{ resolve({entry:'./app.js',/* ... */}) },5000) })}
3.4 第4种：输出多个配置
格式为
module.exports=[{第一个配置对象},{第二个配置对象}]
二：各项配置重点讲解
完整结构如下
module.exports = { entry:"...", output:{... },
module: {
rules: [
{...},{...}, ], }, resolve: { modules: ["node_modules", path.resolve(__dirname,"app") ], extensions: [".js",".json",".jsx",".css"], alias:{...}, }, performance:{... },
devtool: "source-map",
context: __dirname,
target: "web",
externals: ["react", /^@angular\//],
stats: "errors-only",
devServer: { ... },
plugins: [ ... ],
}
2.1 入口文件和上下文 entry & context
module.exports = {// 上下文是查找入口文件的基本目录，是一个绝对值，所以要用到path.resolve// 如果不设，默认为当前目录// 与命令行中的 webpack --context是一样的// 最后入口文件是 context+entry,// 可以写成./today/wang[前加./],./today/wang/[后加/]，不能写成/today/wang，如果../表示在当前目录再往上一层// context 除了这里的入口文件用到，象很多loader,plugin都会要用到这个值context: path.resolve(__dirname,'today/wang'),// entry可以为字符串|对象|数组三种形式// 字符串，适合spa,也就是单页网页，如手机网页// 下面这个entry最终的位置是 项目根目录/today/wang/app/entry.js// 前面./不能少，后面的.js可以省略，也可以写// 以下演示三种entry，实际中取一种就行entry:"./app/entry",// string | object | array// 数组entry: ["./home.js","./about.js","./contact.js"],// 对象，适合于多入口网站，也就是mpa，对象格式的每个键，如home,about,contact是每个入口文件chunk的名字，字符串和数组没有键，它也有一个chunk，名字默认为main entry: {home:"./home.js", about:"./about.js", contact:"./contact.js"}, }
2.2 输出 output
输出的配置比较多，是重点
参考: https://webpack.js.org/config...
module.exports = {output:{ //最后生成的打包文件所在的目录，是一个绝对值，，如果不指定，表示当前目录。如果文件夹不存在，会自动创建 //这个路径除了这里会用到之外，象html插件,file-loader加载器也会用到 // 最后生成的打包文件是 path+ filename path:path.resolve(__dirname,'../dist/'), //filename中可以使用[name],[id],[hash],[chunkhash][query]五种变量 // filename中可以含子文件夹，如如filename: "a/b/c/[id]app.js" filename: 'wang.js', // 如果entry是个对象且有多个chunkname，那么这里会报错，但会生成一个wang.js,它的内容是第一个chunk的，建议entry是多个chunk的对象时，不要写固定名字，要带[name]变量 filename: '[name]wang.js', // 此处的[name]与entry中的chunk名字对应，象上面entry是字符串和数组时，最后输出的文件名是mainwang.js，entry是对象，最后输出的文件名是 homewang.js,aboutwang.js,ccontact123wang.jsfilename: '[id]wang.js', //id从0,1这么增长的，象上面会生成0wang.js,1wang.js,2wang.js三个文件 filename: "[name].[hash].bundle.js" //会打包成about.bab6d0fe556449a9229e.bundle,contact123.bab6d0fe556449a9229e.bundle,home.bab6d0fe556449a9229e.bundle，尤其要记住的是[hash]不要单独用，要与[name]或[id]配合用 filename: "[chunkhash].yes.js", //78f16d7b19ff7ec1fd3a.yes.js,e12898a66041f68c1959.yes.js,f590b1f2de7b72dea5b3.yes.js，20位hash值 hashDigestLength: 8 //指定最后chunkhash和hash变量生成字符串的长度，默认是20个字符 } }
与hash有关的几个配置分别是hashDigest,hashDigestLength,hashFunction,hashSalt知道就行，
2.3 模块 modules
这个是重点，但比较简单，后面的教程中会涉及到,只要记住结构就行
module: {rules: [ { test: /\.vue$/, loader:'vue-loader', options: vueLoaderConfig }, {test: /\.(png|jpg|gif)$/, use: [ { loader:'file-loader', options: { //name:'[path][name].[ext]', name:'[name]2.[ext]', //最后生成的文件名是 output.path+ outputPaht+ name，[name],[ext],[path]表示原来的文件名字，扩展名，路径 //useRelativePath:true, outputPath:'img/'// 后面的/不能少 } } ] }, {test: /\.js$/, loader:'babel-loader', include: [resolve('src'),resolve('test')] }, {test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader:'url-loader', options: { limit:10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, {test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader:'url-loader', options: { limit:10000, name: utils.assetsPath('media/[name].[hash:7].[ext]') } }, {test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader:'url-loader', options: { limit:10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] },
2.4 解析 resolve
这个实用，必须掌握
resolve: { extensions: ['.js','.vue','.json'],//扩展名为.js,.vue,.json的可以忽略，如importAppfrom'./app'，先在当前目录中找app.js，没有再找app.vue，没找到，再找.json，如果还没找到，报错 alias: {'vue$':'vue/dist/vue.esm.js',//别名，这是一个正则的写法，表示以vue结尾的，如importVuefrom'vue'表示importVuefrom'vue/dist/vue.esm.js''@': path.resolve('src'),//这也是为懒人服务的,importHelloWorldfrom'@/components/HelloWorld'这里的@其实就是代表src这个目录'#': path.resolve('src/ui/components')importTablefrom'#/table'} },
2.5 插件 plugins
模块和插件是重点，用单独的张姐讲
plugins:[newHtmlWebpackPlugin(HtmlWebpackPluginConfig),// 生成首页html5文件newwebpack.DefinePlugin({BJ:JSON.stringify('北京'),}) ],
2.6 开发服务器 DevServer
devServer: {//progress只在命令行用，不在配置文件中配contentBase: path.resolve(__dirname,"../dist/"),//网站的根目录为 根目录/dist，如果没有指定，使用process.cwd()函数取当前工作目录，工作目录>npm run devport:9000,//端口改为9000open:true,// 自动打开浏览器index:'front.html',// 与HtmlWebpackPlugin中配置filename一样inline:true,// 默认为true, 意思是，在打包时会注入一段代码到最后的js文件中，用来监视页面的改动而自动刷新页面,当为false时，网页自动刷新的模式是iframe，也就是将模板页放在一个frame中hot:false,publicPath:'/static456/',它与output.publicPath的值应该是一样的，值为上面contentBase目录的子目录，是放js,css,图片等资源的文件夹，记得打包时，将图片等拷贝或打包到该文件下compress:true//压缩}
2.7 开发工具 DevTool
2.8 目标 target
2.9 监控和监控选项 Watch and WatchOptions
watch:true, // 会监视被导入的文件是否有改动，如果有改动，自动打包，但配置文件的改动不会被监视
2.10 外部 External
网友评论