聊聊webpack 4
前言
hello，小伙伴们，本篇仓库出至于我的github仓库 web-study ，如果你觉得对你有帮助的话欢迎star，你们的点赞是我持续更新的动力
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-dev
webpack 的配置 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 非常适合用来开发。
上一篇： JavaScript判断变量类型