专业的集团网站设计网络,口腔网站建设,姑苏区最新通告,wordpress 外链 预览配置上线版#xff08;生产环境#xff09;webpack#xff1a;
实际中将开发环境中和生产环境中打包配置是分开的#xff0c;两者本质没太大区别#xff0c;只是生产环境中的webpack打包配置要更加优化合理#xff0c;下面将具体介绍一下生产环境中webpack配置文件…配置上线版生产环境webpack
实际中将开发环境中和生产环境中打包配置是分开的两者本质没太大区别只是生产环境中的webpack打包配置要更加优化合理下面将具体介绍一下生产环境中webpack配置文件其步骤
1.在项目文件夹中新建一个名为 webpack.publish.config.js 的文件。
2.在package.json文件script中新增配置 “pub”:“webpack --config webpack.publish.config.js”
3.将 webpack.config.js 文件中的代码复制粘贴到 webpack.publish.config.js 文件中进行修改。
4.下面是 webpack.publish.config.js 文件中修改过后的代码示例
const path require(path);//引入路径模块const htmlWebpackPlugin require(html-webpack-plugin);//用于打包时生成html文件的插件const cleanWebpackPlugin require(clean-webpack-plugin);//用于每次打包时删除dist中旧的文件的插件const webpack require(webpack);//引入webpack自己用于配置webpack本身const ExtractTextPlugin require(extract-text-webpack-plugin);//引入抽取CSS的插件const OptimizeCssAssetsPlugin require(optimize-css-assets-webpack-plugin);//引入压缩CSS的插件module.exports {entry: { // 配置入口文件app: path.join(__dirname, ./src/main.js),//将项目根目录中src下的main.js作为入口文件vendors: [jquery] // 配置第三方包无需打包到一起把要抽离的第三方包名加到数组即可},output: {//配置出口文件path: path.join(__dirname, ./dist),//将打包后的文件输出到项目根目录中dist文件夹中filename: js/bundle.js//将打包后的js文件命名为bundle.js并将其存放到dist下js文件夹中},plugins: [ // 配置插件new htmlWebpackPlugin({//打包时在dist中生成html文件的插件template: path.join(__dirname, ./src/index.html),//配置打包时需要的html文件供打包生成html文件filename: index.html,//html文件名minify: {//压缩配置collapseWhitespace: true, // 合并多余的空格removeComments: true, // 移除注释removeAttributeQuotes: true // 移除属性上的双引号}}),new cleanWebpackPlugin([dist]),//每次打包时删除旧的dist文件new webpack.optimize.CommonsChunkPlugin({//抽离第三方包的插件name: vendors, // 指定要抽离的入口名称filename: js/vendors.js //将第三方包单独打包到vendors.js文件中}),new webpack.optimize.UglifyJsPlugin({//压缩插件compress: { // 配置压缩选项warnings: false // 移除警告}}),new webpack.optimize.DedupePlugin({ //配置环境插件process.env.NODE_ENV: production// 设置为上线环境进一步压缩JS代码}),new ExtractTextPlugin(css/styles.css), // 抽取CSS文件new OptimizeCssAssetsPlugin()// 压缩CSS代码的插件],module: {rules: [{//处理css文件test: /\.css$/, use: ExtractTextPlugin.extract({fallback: style-loader,use: css-loader,publicPath: ../ //抽取的时候自动为路径加上 ../ 前缀})},{//处理scss文件test: /\.scss$/, use: ExtractTextPlugin.extract({fallback: style-loader,use: [css-loader, sass-loader],publicPath: ../ //抽取的时候自动为路径加上 ../ 前缀})},{//处理图片test: /\.(png|gif|bmp|jpg)$/,use: url-loader?limit5000nameimages/[hash:8]-[name].[ext]//当文件大于5000时将文件输出到dist下images文件夹中命名为取hash值前8位原文件名后缀},{//处理js文件:test: /\.js$/, use: babel-loader,exclude: /node_modules/ //排除node_modules文件夹中的文件},{//处理vue文件text: /\.vue$/,use: vue-loader},{//处理txt文件test: /\.txt$/,use: raw-loader}//注意更多处理相关文件的配置自行配置需要根据实际进行处理避免无效loader]}
}5.终端输入npm run pub 打生产环境的包。
开发环境webpack配置 需要注意开发环境还是建议使用开发环境的打包配置进行打包因为这样开一提高开发效率开发环境打包配置之前已经介绍过这里再做简单强调一下其主要步骤 1.确保在package.json文件script中有配置“dev”: “webpack-dev-server --open --port 3000 --hot”
2.确保项目文件夹根目录下有: package.config.js 文件其代码示例
const path require(path)const htmlWebpackPlugin require(html-webpack-plugin)module.exports {entry: path.join(__dirname, ./src/main.js),output: {path: path.join(__dirname, ./dist),filename: bundle.js},plugins: [new htmlWebpackPlugin({template: path.join(__dirname, ./src/index.html),filename: index.html})],module: {rules: [{test: /\.css$/,use: [style-loader, css-loader]},{test: /\.scss$/,use: [style-loader, css-loader, sass-loader]},{test: /\.(png|gif|bmp|jpg)$/,use: url-loader?limit5000},{test: /\.js$/,use: babel-loader,exclude: /node_modules/},{text: /\.vue$/,use: vue-loader},{test: /\.txt$/,use: raw-loader}]}
}3.终端键入webpack 打开发环境的包。
注意 以上用到的模块或插件在使用之前确保安装。
提示本文图片等素材来源于网络若有侵权请发邮件至邮箱810665436qq.com联系笔者删除。 笔者苦海
