### webpack的几个核心概念 1. `Entry`：模块解析的入口文件； 2. `Module`：webpack中一切皆模块，一个模块对应一个文件； 3. `Chunk`：代码块，一个chunk由多个模块组成，用于代码的合并与分割； 4. `Loader`：模块转换器，用于将模块的原内容转成新的内容； 5. `Plugin`：扩展插件，在webpack构建的特定流程中注入扩展的逻辑，来改变构建的结果； 6. `Output`：输出结果 ### `ValidationError: CSS Loader Invalid Options` 解决办法： 去掉`minimize`这个属性,这个属性已经被取消了。 ### css加载器 `style-loader`的作用是将css字符串提取出来，并加载到style标签下 `extract-text-webpack-plugin`插件：将js中的文件提取到单独的文件中,webpack4.0被mini-css-extract-plugin取代， ```js { test: /\.css$/, use: ['style-loader', 'css-loader'] // loader的加载顺序是从后往前 } ``` ### `webpack-dev-server` `webpack-dev-server`：提供HTTP服务，需配合`webpack-cli`使用 【注】：`devServer`会将webpack构建的文件放到内存中，所以要达到热更新实现实时预览的效果，需要将`index.html`中对文件的引用的相对路径去掉。 ``` // package.json "start:dev": "webpack-dev-server --hot" ``` ### `context` webpack在寻找相对路径的文件时，会以context为根目录。 context默认为执行webpack时所在的当前工作目录，如果想修改可以： ```js module.exports={ // 必须为绝对路径 context:path.resolve(__dirname,'xxxx') } ``` ### `entry`的类型 ```js // 三种类型，字符串，数组，对象 module.exports={ entry:'./app.js' entry:['./a.js','./b.js'] entry:{a:'./a.js',b:['./b.js']} } ``` ### `output.publicPath` 配置静态资源的URL前缀，可用于CDN前缀的配置 ### `Loader` 1. 条件匹配：test，include，exclude 2. 应用规则：use，默认从后往前的执行顺序 3. 重置顺序：使用enforce 示例： ```js { module:{ rules:[{ test:/\.js$/, use:['bable-loader'], // 只命中src目录下的js文件 include:path.resolve(__dirname,'src') },{ test:/\.scss$/, use:['style-loader,css-loader,scss-loader,'], // 排除node_modules下的scss文件 exclude.resolve(__dirname,'node_modules')， // pre:从前往后，post从后往前 enforce:'post' }] } } // 另一种写法 { module:{ rules:[{ test:/\.js$/, use:[{ loader:'babel-loader', options:{ //配置项 cacheDirectory:true }， }] }] } } // include,exculde也可以传入数组，彼此之间的关系为或 ``` ### `resolve` ```js { resolve:{ alias:{ // 设置别名 components:path.resolve(__dirname,'./src'), // 支持正则匹配只命中react结尾的模块 'rect$':'xxxxxx' }, // 在require或import语句中没有带后缀的,webpack会根据配置自动带上后缀去访问文件 entensions:['.json','.js','.ts'], // 配置webpack寻找第三方模块的目录,默认是node_modules // 也可以加入自定义的模块目录,简化导入的路径,这个少用点,可能会跟node_modules冲突,用别名好了 modules:['./src/components','node_modules'] } } ``` ### `externals` > 作用是告诉webpack在Javascript的运行环境中已经内置了哪些全局变量，不再直接打包到chunk中； ```js { externals:{ // 将导入语句中的jquery替换成运行环境里的全局变量jQuery jquery:'jQuery' } } ``` ### 全局配置 ```js // 全局配置 module.exports = { // entry表示入口，Webpack执行构建的第一步从Entry开始,可抽象成输入 // 类型可以是string,object,array extry:'./app.entry', entry:['./app/entry1','./app/entry2'], entry:{ a:'./app/entry-a' b:['./app/entry-b1','./app/entry-b2'] }, // output 定义webpack的输出方式 output:{ path:path.resolve(__dirname,'dist'), // 必须是string类型的绝对路径 // 输入文件的名称 filename:'bundle.js', //完整的名称 filename:'[name].js', // 名称模板，多个entry filename:'[chunkhash].js', // 根据文件内容个Hash值生成文件名称，用于浏览器的长时间缓存 // 所有资源的URL前缀,为string类型 publicPath:'/assets/', publicPath:'', //根目录 publicPath:'https://cdn.example.com/', // 放到CDN // 导出库的名称,为string类型,不填默认输出为匿名函数 library:'MyLibrary', libraryTarget:'umd', // 默认为var,可以是umd umd2 commonjs amd this var assign window global jsonp pathinfo:true, // boolean类型，是否包含有用的文件路径信息到生成的代码里 chunFilename:'[id].js', chunkFIlename:'[chunkhash].js', sourceMapFilename:'[file].map' }, module:{ rules:[ { test:'/\.jsx$/', include:[ path.resolve(__dirname,'app') ], exculde:[ path.resolve(__dirname,'app/demos') ], use:[ 'style-loader', { loader:'css-loader', options:{} } ] } ], noParse:[ // 不要解析和处理模块 /special-library\.js$/ // 用正则匹配 ] }， plugins:[ // 配置插件 ], // resolve 配置寻找模块的规则 resolve:{ modules:['node_modules',path.resolve(__dirname,'app')], // 默认以node_modules为根目录 extensions:['.js','.json','.jsx','.css'], // 模块的后缀名 alias:{ 'components':'../../src/components', }, enforceExtension:false, // 是否强制导入语句写明文件后缀 }, // 输出文件的性能检查配置 preformance:{ hints:'warning', // 有性能问题时输出警告 hints:'error', hints:false, // 关闭性能检查 maxAssetsSize:20000, // 最大的文件大小，单位Bytes maxEntrypointSize:40000, // 最大入口文件的大小 assetFilter:function(assetFileName){ return assetFileName.endsWith('.css') || assetFileName.endsWith('.js') } }, devtool:'source-map', // 配置source-map类型 context:__dirname, // webpack使用的根目录，string类型必须是绝对路径 // 配置输出代码的运行环境 target:'web', // 浏览器，默认,其他值web-worker,node,async-node,node-webkit,electron-main,electron-renderer externals:{ jquery:'jQuery' }, // 控制台输出日志控制 stats:{ assets:true, colors:true, errors:true, errorDetails:true, hash:true }, devServer:{ proxy:{ '/api':"http://api.example.com" }, contentBase:path.join(__dirname,'public'), // HTTP服务器的文件根目录 compress:true, // 是否开启GZIP压缩 histroyApiFallback:true, hot:true, // 开启模块热替换 https:false, }, // 是否捕捉webpack构建的性能信息，用于分析是什么原因导致的构建性能不佳 profile:true, // 是否使用缓存来提升构建速度 cache:false, watch:true， watchOptions:{ // 监听模式选项 ignored:/node_modules/, aggregateTimeout:300, // 监听到变化后，等300ms在执行动作，截流，防止文件更新太快导致频繁的编译 poll:1000 // 轮询系统指定的文件是否发生变化，默认每秒1000次 } } ```