做网站的步骤 主题,云空间,中国4a广告公司,为什么要进行网店装修最近在学习webpack#xff0c;边学边练习#xff0c;下面是对一些应用到的属性、插件记录分享出来#xff0c;也方便以后查找与复习#xff0c;过程中碰到了一些坑#xff0c;在注释中有说明#xff1a; const path require(path)
const webpack require(webpack… 最近在学习webpack边学边练习下面是对一些应用到的属性、插件记录分享出来也方便以后查找与复习过程中碰到了一些坑在注释中有说明 const path require(path)
const webpack require(webpack)const ExtractTextPlugin require(extract-text-webpack-plugin);
const HtmlWebpackPlugin require(html-webpack-plugin);
const CleanWebpackPlugin require(clean-webpack-plugin);
const UglifyJSPlugin require(uglifyjs-webpack-plugin);function parseUrl(dir) {let mark \\.indexOf(dir) ! -1 ? \\ : \/;return dir.split(mark).slice(0, -1).join(mark);
}
/*** 说明* * 1、可以通过import(\/* webpackChunkName: lodash_file *\/ lodash).then()这种方式动态添加Chunk* 打包以后会独立成一个文件注释部分结合output- chunkFilename 命名打包后的文件名* 2、chunk名称可以通过entry进行定义也有一些默认的chunk包*/
module.exports {entry: { // 命名chunk后面可以通过属性名调用到app: ./app/index.js,check: ./src/check.js,repeat: ./src/repeat.js,vender: [colors,lodash]},}; output output: {// 文件用hash打包的时候([name].[chunkhash].js)需要关闭热替换生产环境是不需要热替换的// filename: [name].bundle.js,filename: [name].[chunkhash].js,path: path.resolve(parseUrl(__dirname), dist),publicPath: /, // webpack-dev-middleware插件用到的公共路径在server.js文件中会用到chunkFilename: [name].bundle.js, // 可以控制动态加载文件名称
}, devtool /*** devtool * * 追踪错误和警告打包以后使用打包文件也可以追踪到哪个文件出错可以有多个选项* 参见https://segmentfault.com/a/1190000004280859 或 https://doc.webpack-china.org/configuration/devtool 官网* * 开发环境推荐使用 cheap-module-eval-source-map* 理由* 1、不生成列信息可以大幅提高 souremap 生成的效率如果需要列信息有些浏览器也可以自动生成列信息* 2、使用 eval 方式可大幅提高持续构建效率参见 https://doc.webpack-china.org/configuration/devtool 效率对照表* * 生产环境使用 source-map*/
devtool: cheap-module-eval-source-map, watch // 监听项目是否有改动如果有改动直接影响修改
watch: true,
watchOptions: {// 重新构建一次的延迟时间在这段时间内有其他变动会收集起来一起构建aggregateTimeout: 300,poll: 1000, // 每秒检查一次变动ignored: /node_modules/ // 忽略node_modules文件夹中的文件变动提升性能
}, devserver // 构建一个web服务器
devServer: {contentBase: ../dist, // 指定服务响应目录hot: true, // 启用热替换模块 需要在入口文件中进行配置监听详细参考文档https://doc.webpack-china.org/guides/hot-module-replacement/
}, module module: {// 解析文件时匹配相对应的loaderrules: [{test: /\.css$/,use: [style-loader, css-loader],use: ExtractTextPlugin.extract({ // 样式独立打包use: css-loader})},{test: /\.(png|svg|jpg|gif)$/,use: [file-loader]}]
}, plugins plugins: [// 分离css依赖生成独立样式包放入参数文件中没有会自动生成new ExtractTextPlugin(styles.css),// 生成html模板调用了webpack生成的所有包new HtmlWebpackPlugin({title: Output Management,filename: index.html,// chunksSortMode: none, // 模块排列顺序// chunks: [app], // 渲染模板输入入口定义的模板名称excludeChunks: [check], // 排除的渲染模板以输入入口定义的模板名称为准template: index.html // 模板路径在现有模板的基础上将打包生成的chucks添加上去}),// 先清除文件夹后生成避免不必要的文件存在根目录下的不能清除new CleanWebpackPlugin([../dist]),// prints more readable module names in the browser console on HMR updatesnew webpack.NamedModulesPlugin(),/*** 热替换* * 需要在devServer属性配置 hot:true 并且创建组件 启动热替换* 通过 module.hot 属性用来接收监听接口 放到入口文件中* 使用热替换可以实现局部刷新节省开发时间* 如果没有引入热替换修改后就会全部刷新影响响应速度* HMR 修改样式表时需要在hot下引入接口* 注意使用热替换监听样式修改时不能启动样式表独立打包模式如果启动浏览器就不能响应到样式的修改* API链接https://doc.webpack-china.org/api/hot-module-replacement*/new webpack.HotModuleReplacementPlugin(),// 代码压缩可以配置source map模式// new UglifyJSPlugin({// // 使用source map模式(devtool属性必须设置为devtool: source-map)// // 作用在生产环境中也可以很方便的调试代码类似于devtool: inline-source-map模式// sourceMap: true// }),new webpack.DefinePlugin({// 定义环境变量可以在打包入口文件中获取到相应环境变量process.env: {NODE_ENV: JSON.stringify(production)}}),// 将公共的依赖模块提取到已有的入口 chunk 中 // 可以创建多个// 可以提取自带 chunk 独立打包比如boilerplate 、 manifest ....new webpack.optimize.CommonsChunkPlugin({name: common, // chunk 的名称filename: common_file.js, // 输出 chunk 文件名/*** 公共 chunk 之前所需要包含的最少数量的 chunks也就是有几个chunk依赖* * 1、可选择 number|Infinity(马上生成 公共chunk但里面没有模块)|function(module, count) - boolean,* 2、可以调用函数 返回true的文件打包成独立文件false 不会独立成包* * param module 模块信息* param count 调用数量*/minChunks: function (module, count) {// 禁止打包样式相关文件有组件针对样式文件打包if (module.resource (/^.*\.(css|scss)$/).test(module.resource)) {return false;}// node_modules文件夹中的文件独立打包return module.context module.context.indexOf(node_modules) ! -1;}}),// 可以根据 entry 或name名称进行分离打包// 如果和 chunk common 共用会报错new webpack.optimize.CommonsChunkPlugin({name: vender,minChunks: Infinity}),// 避免hash发生变化// new webpack.HashedModuleIdsPlugin(),
] 如果有什么不对的地方欢迎指正。
