简单来说webpack的作用就是把我们发环境的代码打包成生成环境的代码
核心概念
entry 入口的职责是要把什么进行编译
output 出口的作用是编译后成什么样子
Loader 进行文件的转换，作用是文件编译
plugin 文件转换后增强一系列的后续操作，可以理解为管道，不参与文件的编译
mode 开发环境还是生成环境
webpack配置
先放出来最终代码地址，如果你赖的自己敲可以复制对应的代码：https://github.com/yjxf8285/webpack-learn
1 首先创建一个项目文件夹，然后在终端中使用npm init -y 命令生成package.json文件，例如：
{
"name": "webpack-learn",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
熟悉webpack核心概念
1.1 安装必要的3个依赖
"devDependencies": {
"webpack": "4.43.0",
"webpack-cli": "3.3.11",
"webpack-dev-server": "3.11.0"
}
1.2 创建webpack配置文件webpack.config.js
module.exports = {
mode: 'development',
// mode: 'production', // 编译后的文件会压缩
entry: './src/index.js',
output: {
filename: 'index.js' // 指定输入文件的文件名
},
}
1.3 执行编译
创建src目录，并在src目录下新建index.js文件，然后执行npx webpack命令，会生成dist目录和index.js编译后的文件
1.4 使用模板插件和拷贝文件
先安装下面这两个插件的依赖，注意版本号
"devDependencies": {
"copy-webpack-plugin": "5.1.1",
"html-webpack-plugin": "4.3.0",
...
配置文件中添加对应的配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require("copy-webpack-plugin")
module.exports = {
mode: 'development',
// mode: 'production', // 编译后的文件会压缩
entry: './src/index.js',
output: {
filename: 'index.js' // 指定输入文件的文件名
},
plugins: [
// new HtmlWebpackPlugin() // 编译后自动生成html文件并引入出口的js文件
new HtmlWebpackPlugin({
template: './src/index.html' // 手动指定index.html的模板
}),
new CopyPlugin([{ from: "static", to: "static" }]), // 拷贝文件到编译后的目录
]
}
src目录下创建index.html模板文件，根目录创建static文件夹，然后在里面新建一些js文件。再执行编译后，可以在dist目录下得到对应的模板和拷贝过去的静态文件
2 拆分配置文件，分别为开发环境和生产环境
需要安装2个依赖，后面要用
"devDependencies": {
"webpack-merge": "4.2.2",
"clean-webpack-plugin": "3.0.0",
...
新建一个build目录，然后创建4个文件
webpack.base.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require("copy-webpack-plugin")
module.exports = {
entry: './src/index.js',
output: {
filename: 'index.js' // 指定输入文件的文件名
},
plugins: [
// new HtmlWebpackPlugin() // 编译后自动生成html文件并引入出口的js文件
new HtmlWebpackPlugin({
template: './src/index.html' // 手动指定index.html的模板
}),
new CopyPlugin([{ from: "static", to: "static" }]), // 拷贝文件到编译后的目录
]
}
webpack.dev.config.js
module.exports = {
devtool: 'cheap-module-eval-source-map' // 生成一个没有列信息（column-mappings）的 SourceMaps 文件，同时 loader 的 sourcemap 也被简化为只包含对应行的。
}
webpack.pro.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
plugins: [
new CleanWebpackPlugin() // 每次编译会自动删除dist目录
]
}
webpack.config.js
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.config')
const devConfig = require('./webpack.dev.config')
const proConfig = require('./webpack.pro.config')
module.exports = (env, argv) => {
const config = argv.mode === 'development' ? devConfig : proConfig
return merge(baseConfig, config)
}
在package.json中编辑运行脚本
"scripts": {
"start": "webpack-dev-server --mode=development --config ./build/webpack.config.js",
"build": "webpack --mode=production --config ./build/webpack.config.js"
},
现在可以根据脚本中指定的mode加载不同的配置文件，并merge基本的配置文件了
3 添加babel支持
先安装3个依赖
"@babel/core": "7.9.6", "@babel/preset-env": "7.9.6", "babel-loader": "8.1.0",
在webpack.base.config.js中添加规则
module: {
rules: [{
test: /\.js$/, // 匹配js结尾的文件
exclude: /node_modules/, // 排除依赖包目录
use: {
loader: 'babel-loader', // 使用哪个loader来翻译
options: {
presets: [ //
['@babel/preset-env', { // @babel/preset-env 根据指定的执行环境提供语法装换，也提供配置 polyfill。
// "useBuiltIns": false, // 不对 polyfill 做操作。
"useBuiltIns": "entry" // 根据配置的浏览器兼容版本范围，引入浏览器不兼容的 polyfill
}]
]
}
}
}]
}
现在项目支持es11语法了，可以试试，如果不行，看看和实例代码的项目有什么区别。