区别:
1 线下模式代码没有压缩,source-map是全的,比较容易定位错误,调试方便
2 线上模式的代码是压缩的,文件小,
分开打包:
方式一:有点麻烦
在package.json文件
"scripts": { "dev-build": "webpack --config webpack.dev.js", 可以看到打包后的文件 "dev": "webpack-dev-server --config webpack.dev.js", 文件在内存中,无法看到文件"build": "webpack --config webpack.prod.js" }, 线上模式打包建立线下配置文件 webpack.dev.js
建立线上配置文件 webpack.prod.js
方式二:
结合方式一,再创建一个webpack.common.js, 文件内放入共用配置,然后就可以清除webpack.dev.js和webpack.prod.js配置文件共用的配置
再安装一个模块: webpack-merge 就成这样了:
webpack.dev.js
const Webpack = require('webpack'); const merge = require('webpack-merge'); const commonConfig = require('./webpack.common.js'); const devConfig = { mode: 'development', devtool: 'cheap-module-eval-source-map', output: { publicPath: '/', }, devServer: { contentBase: './dist', open: true, port: 8090, hot: true, hotOnly: true }, plugins: [ new Webpack.HotModuleReplacementPlugin() ], optimization: { usedExports: true } } module.exports = merge(devConfig, commonConfig);webpack.prod.js:
const merge = require('webpack-merge'); const commonConfig = require('./webpack.common.js'); const prodConfig ={ mode: 'production', devtool: 'cheap-module-source-map', } module.exports = merge(prodConfig, commonConfig);webpack.common.js:
const path = require('path'); const HtmlWebapackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { entry: { main: './src/index.js' }, module: { rules: [{ test: /\.(jpg|png|gif)$/, use: { loader: 'url-loader', options: { name: '[name]_[hash].[ext]', outputPath: 'images/', limit: 10240 } } }, { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", }, { test: /\.(eot|svg|ttf|woff)$/, use: [ 'file-loader' ] }, { test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader', 'postcss-loader' ] },{ test: /\.css$/, use: [ 'style-loader', 'css-loader', 'postcss-loader' ] }] }, output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') }, plugins: [ new HtmlWebapackPlugin({ template: './src/index.html' }), new CleanWebpackPlugin({ cleanAfterEveryBuildPatterns: ['dist'], root: path.resolve(__dirname, '../') }), ] } View Code然后在项目根目录建立build目录,将三个配置文件 放在build目录下,但需要注意路径问题
在package.json中写入命令
"scripts": { "dev": "webpack-dev-server --config ./build/webpack.dev.js", "build": "webpack --config ./build/webpack.prod.js" },PS:改变配置文件目录后要注意路径问题 比如配置中 path.resolve(__dirname, '../dist')是相对于配置文件的路径找 ../dist目录 ,但是其他的 template: './src/index.html' 中是找package.json相对的./src/index.html文件
转载于:https://www.cnblogs.com/init-007/p/11360752.html
