快速配置webpack

標籤：highlight   edm   mod   重新整理   project   dex   asc   new   process   

區分開發模式和生產模式：

　　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.jsconst 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;

　　

快速配置webpack