webpack入门学习（三）

2023-03-10 08:06| 来源: 网络整理| 查看: 265

前两个系列已经分析了webpack的基本使用方法以及loader和plugin的使用和配置方式，但是我们都知道项目开发分为开发阶段和生产阶段，在不同的阶段需要搭建的环境也不一样，本文，一起来探讨在各个阶段常用的环境配置。

开发环境Development

第一步：设置开发模式

const path = require('path'); module.exports = { + mode: 'development', //提醒使用者该项目当前还是开发阶段，不能进入生产阶段使用 entry: { app: './src/index.js', print: './src/print.js', }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), }, };

第二步：经过打包后的文件内容已经变成我们无法阅读的样子，如果报错就没办法找出是在源代码的什么位置，为了解决这个问题可以使用inline-source-map

const path = require('path'); module.exports = { mode: 'development', entry: { app: './src/index.js', print: './src/print.js', }, + devtool: 'inline-source-map', output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), }, };

第三步：打开一个可以实时更新的服务器，不需要每次都执行一次npm run build去更新。

下载webpack-dev-server

npm install --save-dev webpack-dev-server

设置配置文件

const path = require('path'); module.exports = { mode: 'development', entry: { app: './src/index.js', print: './src/print.js', }, devtool: 'inline-source-map', + devServer: { + contentBase: './dist', + }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), }, };

在paackage.json中配置script

{ "name": "development", "version": "1.0.0", "description": "", "private": true, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "watch": "webpack --watch", + "start": "webpack-dev-server --open", "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "css-loader": "^0.28.4", "style-loader": "^0.18.2", "webpack": "^4.30.0", "webpack-dev-server": "^3.8.0", } }

这样只需要执行npm start就可以开始dev-server了，如果步设置package.json就需要执行npx webpack-dev-server --open.

生产环境Production

和开发环境相似的是：

const merge = require('webpack-merge'); const common = require('./webpack.common.js'); module.exports = merge(common, { + mode: 'production', //模式改成production + devtool: 'source-map', //从inline-source-map改成source-map，会大量减少map的代码 });

当然也有需要和生产环境相同的配置设置，因此我们将配置文件即webpack.config.js分成三份webpack.common.js，webpack.dev.js和webpack.prod.js. 根据名字可以直到commom是共需的，dev是开发阶段需要的，prod是生产阶段需要的。

因为每个阶段需要的配置文件都需要和common文件合并，因此先安装合并需要的webpack-merge

npm install --save-dev webpack-merge

接下来设置webpack.dev.js

+ const merge = require('webpack-merge'); + const common = require('./webpack.common.js'); + + module.exports = merge(common, { + mode: 'development', + devtool: 'inline-source-map', + devServer: { + contentBase: './dist', + }, + });

webpack.prod.js

+ const merge = require('webpack-merge'); + const common = require('./webpack.common.js'); + + module.exports = merge(common, { + mode: 'production', + });

最后设置package.json中关于不同阶段的命令即可

{ "name": "development", "version": "1.0.0", "description": "", "main": "src/index.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", } }

如果需要在js源文件有针对生产环境才生效的代码，那么则需要加上相应的条件判断如下：

import { cube } from './math.js'; + if (process.env.NODE_ENV !== 'production') { + console.log('Looks like we are in development mode!'); + } function component() { const element = document.createElement('pre'); element.innerHTML = [ 'Hello webpack!', '5 cubed is equal to ' + cube(5) ].join('\n\n'); return element; }

【本文地址】

公司简介

联系我们