webpack线上和线下模式

区别:

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, '../')
		}),
    ]
}

然后在项目根目录建立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文件