Webpack 配置详解及实现过程
Webpack 配置详解一、打包升级1.基础打包配置1. 开发模式(devtool)demo_base版本 This option controls if and how source maps are generated. 开发建议使用eval模式,缺点是无法正确显示行号,想要正确显示行号,可以时候用source-map或者eval-source-map 生产环境: 建议使用cheap-module-source-map 2. 入口配置(entry)string | [string] | object { <key>: string | [string] } | (function: () => string | [string] | object { <key>: string | [string] }) 入口打包根场景不同,入口配置也不同。
entry: './A/index.js' entry: [ './A/index.js',],
entry: [ './A/index.js','./B/index.js' ],entry: { A: './A/index.js',B: './B/index.js' } 3. 输出配置(output)
4. resolveConfigure how modules are resolved. For example,when calling import "lodash" in ES2015,the resolve options can change where webpack goes to look for "lodash" (see modules). resolve: { // 当你reuire时,不需要加上以下扩展名 extensions: ['.js','.md','.txt'],}, 5. 插件(plugin)plugins: [ // Webpack 2以后内置 // new webpack.optimize.OccurrenceOrderPlugin(),// 碰到错误warning但是不停止编译 new webpack.NoEmitOnErrorsPlugin(),// 开发模式不需要压缩 // new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), 6. moudles* babel-loader(用来做js代码转化) * style-loader & css-loader(用来转化css代码) * less-loader 转化less文件 * raw-loader 把文件当做普通的文本文件读取 * json-loader webpack 2以后就不需要配置了(内置了) * url-loader 用来处理eot|woff|woff2|ttf|svg|png|jpg这些文件,可以防止加载资源文件导致页面加载缓慢 * file-loader 用来处理文件,可以用url-loader代替,但是如果你资源文件是即时文件,那么就使用file-loader 2.多入口打多个包 (生成多个bundle.js)这个是webpack 3.1.0新出来的配置方式,可以用来解决多个入口文件,打包成多个文件夹的问题。 demo 将多个入口打成多个文件夹 module.exports = [{ output: { filename: './dist-amd.js',libraryTarget: 'amd' },entry: './app.js',{ output: { filename: './dist-commonjs.js',libraryTarget: 'commonjs' },}] 3.兼容多浏览器,添加postcss-loader(生产环境使用,增加build和rebuild时间)demo 添加postcss 添加postcss-loader,需要做如下配置 webpack config 配置插件配置 { test: /.less/,use: [ 'style-loader','css-loader',+ 'postcss-loader','less-loader' ] },{ test: /.css$/,- use: 'style-loader!css-loader',+ use: 'style-loader!css-loader!postcss-loader', .postcss.config.js文件配置module.exports = { plugins: { 'postcss-import': {},// 能够使用import语法 @import "cssrecipes-defaults"; 'postcss-cssnext': {},//PostCSS-cssnext是一个PostCSS插件,可以帮助您使用最新的CSS语法。 它将CSS规范转换为更兼容的CSS,因此您不需要等待浏览器支持。 'cssnano': {} } } 4.css文件抽离 (生成环境使用,会增加build和rebuild时间)demo css文件分离 webpack config 配置插件配置 +const ExtractTextPlugin = require('extract-text-webpack-plugin'); +new ExtractTextPlugin('style.css'),//名字配置 { test: /.less/,_ use: [ _ 'style-loader',_ 'css-loader',_ 'less-loader' _ ] + use: ExtractTextPlugin.extract({ + fallback: 'style-loader',+ use: ['css-loader','less-loader'] + }) },+ use: ExtractTextPlugin.extract({ + fallback: 'style-loader',+ use: ['css-loader'] + }) },//PostCSS-cssnext是一个PostCSS插件,可以帮助您使用最新的CSS语法。 它将CSS规范转换为更兼容的CSS,因此您不需要等待浏览器支持。 'cssnano': {} } } 5.公共文件抽取 (抽取公共文件,可以减少build与rebuild时间)公共文件抽取一般依靠 CommonChunkPlguin 和 Dllplugin这两个插件. CommonChunkPlugin Demo DllPlugin Demo
CommonChunkPlugin 配置: // 如果有其他CommonsChunkPlugin生成的文件,将会引入 // - If chunk has the name as specified in the chunkNames it is put in the list // - If no chunk with the name as given in chunkNames exists a new chunk is created and added to the list // 大概意思就是如果name在entry里面有,那就加入一个列表,如果entry里面没有, // 那么就创建一个新chunk列表,如果chunks里面相同模块代码出现次数超过minChunks,那就添加到这个新创建的list里面。 new webpack.optimize.CommonsChunkPlugin({ name: "common",chunks: ["a","b"],//需要合并的文件 // minChunks:3 //最少在出现过多少次才将其打入common中 }),//如果 new webpack.optimize.CommonsChunkPlugin({ name: "vendor",minChunks: Infinity }) DllPlugin 配置: 添加文件 const webpackConfig = { name: "vendor",entry: ["react","react-dom"],output: { path: buildPath,// 输出文件路径 filename: "vendor.js",library: "vendor_[hash]" },plugins: [ new webpack.DllPlugin({ name: "vendor_[hash]",path: path.resolve(buildPath,"manifest.json") }) ] }; name: "app",+ dependencies: ["vendor"],devtool: 'eval',+ new webpack.DllReferencePlugin({ + manifest: path.resolve(buildPath,"manifest.json") + }), 6.文件分析(visualizer)文件分析可以插件可以帮助查看我们生成的bundle.js和chunk的组成成分,可以根据这个进行代码优化。(开发环境使用) + const StatsWriterPlugin = require('webpack-stats-plugin').StatsWriterPlugin; + const Visualizer = require('webpack-visualizer-plugin'); + new StatsWriterPlugin({ + fields: null,+ stats: { chunkModules: true } + }),+ new Visualizer({ + filename: './statistics.html' // visualizer 文件名称,在output 设置的path文件夹可以找到 + }) 7.DefinePlugin(生产环境配置可以减少文件体积)这个减少文件体积是相对的,webpack打包的时候回删去无用的代码,而react-dom等一些文件中都有很多下面的代码形式,这样webpack 和 DefinePlugin插件配合可以减少部分文件体积 if (process.env.NODE_ENV !== 'production') {} new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production') } }), 8.OccurrenceOrderPlugin内置加入,不需要配置9.UglifyJsPlugin(压缩文件,减小文件体积,生产环境使用)webpack 本身内置uglifyjs,如果你想控制uglifyjs的版本,可以使用这个。 const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); new uglifyJsPlugin({ compress: { warnings: false } }) 10.热替换配置(开发环境自动刷新)篇幅过大,移至此文章 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |