在项目下创建一个webpack.config.js（默认，可修改）文件，用于配置webpackmodule.exports={entry:'',//入口文件output:{},//导出文件module:{},//处理对应模块plugins:[],//对应插件devServer:{},//开发服务器配置模式:'development'//模式配置}以上就是普通的webpack配置模块入口项目资源的入口，可以是单个文件，也可以是多个文件。条目类型字符串（单个文件条目）module.exports={entry:'./app.js'}数组（多个文件条目）module.exports={entry:['./app.js','./index.js']}object(multiplefileentry)module.exports={entry:{index,'./index.js',app,'./app.js'}//index代表一个唯一的chunk}contextWebpack在什么时候查找具有相对路径的文件，上下文将被用作根目录，上下文默认为Webpack执行和启动的当前工作目录。如果你想改变context的默认配置，你可以在配置文件中这样设置：module.exports={context:path.resolve(__dirname,'app')}Chunk，Chunk的名称与Entry的配置有关：如果entry是字符串或数组，则只生成一个Chunk，Chunk的名称为main；如果entry是对象，则可能有多个Chunk，Chunk的名字就是对象键值对中key的名字。动态入口如果项目中有多个页面，需要为每个页面的入口配置一个Entry，但是这些页面的数量可能会不断增长。这时Entry的配置会受到其他因素的影响，不能写成静态值。解决方法是将Entry设置为一个函数，动态返回上面提到的配置，代码如下：//同步函数entry:()=>{return{a:'./pages/a',b:'./pages/b',}};//异步函数入口:()=>{returnnewPromise((resolve)=>{resolve({a:'./pages/a',b:'./pages/b',});});};output这是一个配置对象，我们可以通过它来配置最终打包好的产品。filenameoutput.filename配置输出文件的名称，为字符串类型。单个文件的输出constpath=require('path');module.exports={entry:'./app.js',output:{path:path.join(__dirname,'dist'),//包资源placement路径必须是绝对路径。filename:'bundle.js'//打包结果的文件名。}}多个文件的输出constpath=require('path');module.exports={entry:{index,'./index.js',app,'./app.js'},output:{path:path.join(__dirname,'dist'),filename:'[name].min.[hash:5].js'}}chunkFilenameoutput.chunkFilename配置无入口Chunk的输出文件名。chunkFilename和上面的filename很像，但是chunkFilename只是用来指定运行过程中产生的Chunk的输出文件名。运行时生成Chunk的常见场景包括使用CommonChunkPlugin时，使用import('path/to/module')动态加载等。chunkFilename支持与filename一致的内置变量。pathoutput.path配置输出文件所在的本地目录，必须是字符串类型的绝对路径。绝对路径一般通过Node.js的path模块获取：path:path.resolve(__dirname,'dist_[hash]')publicPathoutput.publicPath配置发布到在线资源的URL前缀，为字符串类型。默认为空字符串''，即使用相对路径。构建好的资源文件需要上传到CDN服务，加快页面打开速度。配置代码如下：filename:'[name]_[chunkhash:8].js'publicPath:'https://cdn.example.com/assets/'此时在线发布的HTML需要导入JavaScriptfiles:使用这个配置项要小心，稍有不慎就会导致资源加载出现404错误。modulemodule配置模块的处理方式。配置加载程序以处理文件。Webpack本身只能处理JavaScript，根本无法理解其他类型的语法。如果我们需要引入某个类型的模块，我们需要为其添加一个特性类型加载器。rules配置模块的读取和解析规则，通常用于配置Loader。它的类型是一个数组，数组中的每一项描述了如何处理文件的一部分。条件匹配：使用test、include、exclude三个配置项命中Loader应用规则的文件。应用规则：通过use配置项将Loader应用到选中的文件中。可以只应用一个Loader，也可以从后向前依次应用一组Loader，也可以分别给Loader传入参数。重置顺序：一组Loader的执行顺序默认是从右到左执行的，可以通过enforce选项将其中一个Loader的执行顺序放在最前面或者最后。module:{rules:[{//命中JavaScript文件test:/\.js$/,//使用babel-loader转换JavaScript文件//?cacheDirectory代表传递给babel-loader的参数，用于缓存babel编译结果，加快重新编译速度use:['babel-loader?cacheDirectory'],//只命中src目录下的js文件，加快webpack搜索include:path.resolve(__dirname,'src')},{//命中SCSS文件test:/\.scss$/,//使用一组Loader来处理SCSS文件。//处理顺序是从后到前，即先交给sass-loader处理，再交给css-loader，最后交给style-loader。use:['style-loader','css-loader','sass-loader'],//排除node_modules目录中的文件exclude:path.resolve(__dirname,'node_modules'),},{//对于非文本文件由文件加载器测试加载：/\.(gif|png|jpe?g|eot|woff|ttf|svg|pdf)$/，使用：['file-loader'],},]}在Loader中需要传入很多参数时，也可以使用一个Object来描述。比如上面的babel-loader配置中，有如下代码：use:[{loader:'babel-loader',options:{cacheDirectory:true,},//enforce:'post'表示放orderoftheLoaderattheend//enforce的值也可以是pre，表示把Loader的执行顺序放在最前面三个命中文件的items，testincludeexclude，只传入字符串或正则表达式。其实都支持数组类型，用法如下：{test:[/\.jsx?$/,/\.tsx?$/],//只选择当前目录include:[path.resolve(__dirname,'src'),path.resolve(__dirname,'tests'),],//排除对应目录文件exclude:[path.resolve(__dirname,'node_modules'),path.resolve(__dirname,'bower_modules'),]}常用Loader编译相关：babel-loader、ts-loader样式相关：style-loader、css-loader、less-loader、postcss-loader文件相关：file-loader、url-loaderpluginsPlugin用于扩展Webpack功能，多种Plugins让Webpack可以做几乎任何构建相关的事情参与整个打包过程打包优化和压缩配置变量极其灵活Plugin的配置非常简单。plugins配置项接受一个数组，数组中的每一项都是一个要使用的Plugin实例，通过构造函数传入Plugin需要的参数。constCommonsChunkPlugin=require('webpack/lib/optimize/CommonsChunkPlugin');module.exports={plugins:[//将所有页面使用的公共代码提取到公共代码块中newCommonsChunkPlugin({name:'common',块：['a','b']}),]};常用Plugins优化相关CommonsChunkPluginUglifyjsWebpackPlugin功能相关ExtractTextWebpackPluginHtmlWebpackPluginHotModuleReplacementPluginCopyWebpackPlugin其他名词Chunk相当于代码块打包后的Module模块Bundle打包
