快速配置webpack

Posted 2021-01-04 杨 小匠

区分开发模式和生产模式：

　　npm run start——开发模式，启用devServer，文件的改动实时更新、刷新

　　npm run build——生产模式，打包文件到dist文件夹

 

// package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "simple project",
  "private": true,
  "scripts": {
    "build": "webpack --config webpack.config.js --color --progress --mode=production",
    "start": "webpack-dev-server --open --mode=development"
  },
  "author": "yangxiang",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "copy-webpack-plugin": "^4.5.2",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "uglifyjs-webpack-plugin": "^1.3.0",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.7"
  },
  "dependencies": {
    "mockjs": "^1.0.1-beta3"
  }
}

　　

// webpack.config.js

const path = require(‘path‘);
const webpack = require(‘webpack‘);
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin‘);

let webpackConfig = {
    entry: ‘./index.js‘,
    output: {
        filename: ‘main.js‘,
        path: path.resolve(__dirname, ‘dist‘)
    },
    module: {
        rules: [{
            test: /.js$/,
            exclude: /node_modules/,
            use: {
                loader: ‘babel-loader‘,
                options: {
                    presets: [‘env‘]
                }
            }
        }, {
            test: /.(png|jpe?g|gif)(?.*)?$/,
            use: [{
                loader: ‘url-loader‘,
                options: {
                    limit: 4096,
                    name: ‘img/[name].[hash:8].[ext]‘
                }
            }]
        }, {
            test: /.css$/,
            use: [‘style-loader‘, ‘css-loader‘]
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: ‘./index.html‘
        })
    ]
};

if (process.env.NODE_ENV == "development") {
    // 开发模式下的配置
    webpackConfig.devServer = {
        hot: true,
        port: 8888
    };
    webpackConfig.plugins.concat(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    )
} else {
    // 生产模式下的配置
    webpackConfig.plugins.concat(
        new UglifyJsPlugin({
            uglifyOptions: {
                compress: {
                    warnings: false
                }
            },
            sourceMap: true,
            parallel: true
        })
    )
}

module.exports = webpackConfig;