webpack配置
前言
本人小白一枚，每次使用webpack都要好一番搜索加CV。今天突然心血来潮，准备去网上搜索一番，整理一下webpack的简单使用，避免每次使用都要花费半天时间去百度，一劳永逸。有不对的地方，欢迎各位大佬指正！！！
一、入门（初始配置）
1 新建一个目录，初始化npm
// 初始化项目，对包进行管理
npm init // 自定义配置
npm init -y // 生成默认配置
2 安装webpack和webpack-cli
npm install webpack webpack-cli -D(--save-dev)
3 默认配置
-
新建需要打包的文件：
在根目录下新建一个文件夹src ,里面新建一个文件main.js,写一点测试代码（如：console.log(“webpack”)） -
在package.json中的scripts中添加新的命令：
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack ./src/main.js" }, -
执行打包命令，打包文件
npm run build -
此时会在根目录下生成了一个dist文件夹，并且内部含有main.js。如若没有，说明打包失败。
-
该例子只是webpack自己默认的配置，更加丰富的自定义配置在后面
4 自定义配置
-
在根目录下新建一个build文件夹,里面新建一个webpack.config.js
const path = require('path'); module.exports = { mode:'development', // 开发模式 entry: path.resolve(__dirname,'../src/main.js'), // 入口文件 output: { filename: 'main-min.js', // 打包后的文件名称 path: path.resolve(__dirname,'../dist') // 打包后的目录 } } -
更新打包命令
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config build/webpack.config.js", },
*4 自定义配置例外情况说明
- 如果不在根目录下新建build文件夹，而是直接在根目录下新建webpack.config.js文件也可。
- 如果是直接在根目录下新建webpack.config.js文件，webpack.config.js中的一些路径参数要进行修改
- 这样就可以直接在根目录下运行webpack命令也可以生效，无需在package.json中配置打包命令也可
二、webpack插件使用
5.1 打包前清空dist目录
每次我们重新webpack打包的时候还要把上次打包的dist目录删除掉，麻烦，所以这里下载一个dist目录自动清空插件，以后打包会默认把上次打包内容清空后打包。
-
下载安装clean-webpack-plugin插件
npm i clean-webpack-plugin -D -
导入下载的插件
-
在webpack.config.js中定义插件配置的属性 plugins ，存放每个插件
-
每个插件都是一个类，直接new就行
const path = require("path"); // 1.先导入下载的插件 const { CleanWebpackPlugin } = require("clean-webpack-plugin"); module.exports = { mode: "development", // 开发模式 entry: path.resolve(__dirname, "../src/main.js"), // 入口文件 output: { filename: "main-min.js", // 打包后的文件名称 path: path.resolve(__dirname, "../dist"), // 打包后的目录 }, //2.定义插件配置的属性 plugins ，存放每个插件 plugins: [ //3.每个插件都是一个类，直接new就行 new CleanWebpackPlugin(), ], }; -
上述通过插件清空的方式在webpack5后不再使用，webpack5有新增清空dist目录的方式，在output增加clean字段，现补充如下
const path = require("path"); module.exports = { mode: "development", // 开发模式 entry: path.resolve(__dirname, "../src/main.js"), // 入口文件 output: { filename: "main-min.js", // 打包后的文件名称 path: path.resolve(__dirname, "../dist"), // 打包后的目录 clean: true, // 开启打包前清空dist目录 }, };
5.2 转义js文件，兼容性处理
-
下载插件
npm i babel-loader @babel/preset-env @babel/core -D -
插件的使用
// ...... module.exports = { // ...... module: { rules: [{ test: /\.js$/, loader: 'babel-loader', exclude: /(node_modules|bower_components)/, options: { presets: ['@babel/preset-env'] } }] }, }; -
你会发现IE浏览器还是会出现不兼容的问题，因为上面的方法是针对一些兼容问题，还有一些兼容性问题并不能解决。我们还可以使用@babel/polyfill和core-js两种方法暴力解决
-
polyfill
-
下载插件
npm i @babel/polyfill -D -
使用polyfill
在文件中通过js引入：
import '@babel/polyfill' const add = (x, y) => { return x + y; } console.log(add(2, 3)); new Promise(function(resolve) { resolve(1) }).then(function(res) { console.log(res, 'promise') })
-
-
core-js
-
下载插件
npm i core-js -D -
使用core-js
在webpack.config.js里面引入使用：
// ...... module.exports = { // ...... module: { rules: [{ test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: [ [ '@babel/preset-env', { useBuiltIns: 'usage', corejs: { //core-js的版本 version: 3 }, //需要兼容的浏览器 targets: { chrome: '60', firefox: '60', ie: '9', safari: '10', edge: '17' } } ] ] } } }] }, };
-
-
插件作用解析
- babel-loader默认只转换新的JavaScript句法，而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。
- polyfill 指的是“用于实现浏览器不支持原生功能的代码”，比如，现代浏览器应该支持 fetch函数，对于不支持的浏览器，网页中引入对应 fetch 的 polyfill 后，这个 polyfill就给全局的window对象上增加一个fetch函数，让这个网页中的 JavaScript 可以直接使用 fetch函数了，就好像浏览器本来就支持 fetch 一样
- core-js负责将新的api进行转化，例如promise、Generator、Set、Maps、Proxy等
-
使用webpack5打包之后会出现一中情况，打包文件默认输出形式是箭头函数，使用babel转也不行
解决方法： 修改构建目标 target，使得 Webpack 生成 web 平台的运行时代码，并且只使用 ES5 相关的特性：
module.exports = { target: ['web', 'es5'], }
三、区分开发环境和生产环境
-
development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异。
-
在开发环境中，我们需要①强大的 source map 和一个有着 ②live reloading(实时重新加载) 或 ③hot module replacement(热模块替换) 能力的 localhost server。
-
生产环境目标则转移至其他方面，关注点在于①压缩 bundle、②更轻量的 source map、③资源优化等，通过这些优化方式改善加载时间。
1.新增开发环境下的文件和生产环境下的文件
由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置。所以我们在原来webpack.config.js的基础上再新增两个文件webpack.prod.js和webpack.dev.js
2.安装webpack-merge
这里我们需要使用webpack-merge帮我们merge代码
npm i -D webpack-merge
3.使用webpack-merge
// webpack.dev.js
const path = require("path");
const { merge } = require("webpack-merge");
const common = require("./webpack.config.js");
module.exports = merge(common, {
mode: "development",
devtool: "inline-source-map",
devServer: {
hot: true, //热更新
open: true, //编译完自动打开浏览器
compress: true, //开启gzip压缩
port: 3000, //开启并设置端口号
//托管的静态资源文件
//可通过数组的方式托管多个静态资源文件
static: {
directory: path.join(__dirname, "../public"),
},
},
});
// webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.config.js');
module.exports = merge(common, {
mode: 'production',
});
4.修改webpack.config.js
删除mode和devserver字段:
const path = require("path");
// 1.先导入下载的插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
entry: path.resolve(__dirname, "../src/index.js"), // 入口文件
output: {
filename: "index-min.js", // 打包后的文件名称
path: path.resolve(__dirname, "../dist"), // 打包后的目录
// clean: true, // 开启打包前清空打包目录
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
exclude: /(node_modules|bower_components)/,
options: {
presets: ["@babel/preset-env"],
},
},
],
},
//2.定义插件配置的属性 plugins ，存放每个插件
plugins: [
//3.每个插件都是一个类，直接new就行
new CleanWebpackPlugin(),
],
target: ["web", "es5"],
};
5.安装webpack-dev-server
npm install webpack-dev-server -D
6.使用webpack-dev-server，修改package.json中的scripts命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config build/webpack.prod.js",
"dev": "webpack-dev-server --config build/webpack.dev.js"
},
235
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
