前言
hello，小伙伴们，本篇仓库出至于我的GitHub仓库 web-study ，如果你觉得对你有帮助的话欢迎star，你们的点赞是我持续更新的动力
web-study
webpack 打包工具
webpack 毫无疑问现在是非常火热的前端自动化打包工具，本系列教程是基于最新版 webpack 4.X.X 来编写。
webpack 4：零配置开始
- 创建一个目录然后进入，初始化生成
package.json文件
md webpack-4-quickstart
cd webpack-4-quickstart
npm init -y- 安装
webpack4和webpack-cli
npm install webpack webpack-cli --save-dev- 打开
package.json添加构建脚本：
"scripts": {
"build": "webpack"
}- 创建入口文件：
index.js，webpack4默认入口文件为/src/index.js
console.log('hello world!')- 打包构建
npm run build你会在 ~/webpack-4-quickstart/dist/main.js 得到你打包后的文件。
Webpack 4: 生产和开发模式
创建 webpack.config.js webpack 配置文件，webpack 4 介绍了生产（production） 和开发（development） 两种模式，需要通过 mode属性指定。
在webpack.config.js文件中指定mode 属性为development，再次打包文件。（npm run build）。
可以看到main.js文件中的代码没被压缩，哈哈，这就是 webpack 的厉害之处，可以分模式开发。
webpack 4：覆盖默认的入口/出口文件
在webpack.config.js 文件中通过 entry 属性指定打包的入口文件，output属性指定打包后的出口文件。
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/hello.js',
output: {
path: path.resolve(__dirname, 'dist'), // 这里必须指定一个绝对路径
filename: 'hello.js'
}
}再次打包，就会打包 ./src/hello.js ，输出 ./dist/hello.js。
webpack 4：用 Babel 7 转译 ES6 的 js 代码
现在大家都习惯用 ES6 写 Javascript。
但是不是所有浏览器都知道怎么处理 ES6。我们需要做一些转换。
这个转换的步骤叫做 transpiling。transpiling 是指把 ES6 转译成浏览器能够识别的代码。
webpack 本身并不知道如何去转换，但是有 loaders。把他们想象成转换器。
babel-loader 是 webpack 的一个 loader，可以把 ES6 以上的代码转译成 ES5。
为了使用这个 loader 我们需要去安装一系列的依赖。特别是：
- babel-core
- babel-loader
- babel-preset-env （for compiling Javascript ES6 code down to ES5）
先安了吧：
npm i babel-core babel-loader babel-preset-env --save-dev下一步我们在项目目录下建立一个 .babelrc文件用来配置 Babel。
{
"presets": ["env"]
}配置完成后通过配置文件使用 babel-loader
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}webpack 4：HTML 插件
webpack 需要两个额外的组件去处理 HTML：html-webpack-plugin 和 html-loader。
先安装：
npm i html-webpack-plugin html-loader --save-devwebpack 的配置 html-loader
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: true } // 是否压缩代码
}
]
}
... 插件使用...
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
})
]在 ./src/index.html 新建一个 HTML 文件（模板文件，用来给webpack打包）
最后运行 npm run build 重新打包，查看 ./dist 目录，你会看到运行后的结果。
没有必要在你的 HTML 文件中引入你的 JavaScript：它会自动地注入进去。
在浏览器打开 ./dist/index.html：你可以看到最后的结果。
webpack 4： 提取 CSS 到文件中
mini-css-extract-plugin 插件用来提取 CSS 到文件中。
安装它：
npm i mini-css-extract-plugin css-loader --save-dev然后建立一个 CSS 文件用来测试：
body {
line-height: 2;
}配置 loader 和 plugin：
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
...插件使用...
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})最后在入口文件中引入 CSS：
import style from './main.css'构建：
npm run build查看 ./dist 目录，你应该能看到 CSS 的结果！
重点回顾：extract-text-webpack-plugin 在 webpack 4 中不能用了。请使用 mini-css-extract-plugin。
webpack 4：webpack dev server
一旦配置了 webpack dev server 它会在浏览器中加载你的 app。
只要你改变了文件，它会自动地刷新浏览器的页面。
安装下面的包来搭建 webpack dev server：
npm i webpack-dev-server --save-dev然后打开 package.json 调整脚本：
"scripts": {
"dev": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
}保存关闭。
现在运行：
npm run dev你就会看到 webpack dev server 在浏览器中加载你的应用了。
webpack dev server 非常适合用来开发。