16 Webpack 开发与生产配置分离

￡神魔★判官ぃ 2023-02-28 05:23 11阅读 0赞

如下，我们将开发与生产的 webpack 配置分离

## **配置** ##

我们先从安装 webpack-merge 开始：

npm install --save-dev webpack-merge

project

webpack-demo

|- package.json

\- |- webpack.config.js

\+ |- webpack.common.js

\+ |- webpack.dev.js

\+ |- webpack.prod.js

|- /dist

|- /src

|- index.js

|- math.js

|- /node\_modules

webpack.common.js

\+ const path = require('path');

\+ const CleanWebpackPlugin = require('clean-webpack-plugin');

\+ const HtmlWebpackPlugin = require('html-webpack-plugin');

\+ module.exports = \{

\+   entry: \{

\+     app: './src/index.js'+   \},

\+   plugins: \[

\+     new CleanWebpackPlugin(\['dist'\]),

\+     new HtmlWebpackPlugin(\{

\+       title: 'Production'

\+     \})

\+   \],

\+   output: \{

\+     filename: '\[name\].bundle.js',

\+     path: path.resolve(\_\_dirname, 'dist')

\+   \}

\+ \};

webpack.dev.js

\+ const merge = require('webpack-merge');

\+ const common = require('./webpack.common.js');

\+ module.exports = merge(common, \{

\+   devtool: 'inline-source-map',

\+   devServer: \{

\+     contentBase: './dist'

\+   \}

\+ \});

webpack.prod.js

\+ const merge = require('webpack-merge');

\+ const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

\+ const common = require('./webpack.common.js');

\+ module.exports = merge(common, \{

\+   plugins: \[

\+     new UglifyJSPlugin()

\+   \]

\+ \});

# #

## **NPM Scripts** ##

现在，我们把 scripts 重新指向到新配置。我们将 npm start 定义为开发环境脚本，并在其中使用 webpack-dev-server，将 npm run build 定义为生产环境脚本：

package.json

"name": "development",

"version": "1.0.0",

"description": "",

"main": "webpack.config.js",

"scripts": \{

\-     "start": "webpack-dev-server --open",

\+     "start": "webpack-dev-server --open --config webpack.dev.js",

\-     "build": "webpack"

\+     "build": "webpack --config webpack.prod.js"

\},

"keywords": \[\],

"author": "",

"license": "ISC",

"devDependencies": \{

"clean-webpack-plugin": "^0.1.17",

"css-loader": "^0.28.4",

"csv-loader": "^2.1.1",

"express": "^4.15.3",

"file-loader": "^0.11.2",

"html-webpack-plugin": "^2.29.0",

"style-loader": "^0.18.2",

"webpack": "^3.0.0",

"webpack-dev-middleware": "^1.12.0",

"webpack-dev-server": "^2.9.1",

"webpack-merge": "^4.1.0",

"xml-loader": "^1.2.1"

随意运行这些脚本，然后查看输出结果的变化

16 Webpack 开发与生产配置分离

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 16 Webpack 开发与生产配置分离

相关 webpack生产环境配置

相关 webpack 生产/开发环境配置文件分离

相关 webpack生产环境基本配置

相关 webpack入门3-----生产环境配置

相关 webpack开发和生产两个环境的配置详解

相关 webpack开发环境与生产环境分离

相关 webpack4.16开发环境配置

相关 webpack生产阶段的配置

相关 13、webpack构建--开发生产构建配置文件分离