一、开始
安装
# 安装最新稳定版本
npm i -D webpack
# 安装指定版本
npm i -D webpack@<version>
# 安装最新的体验版本
npm i -D webpack@beta
# 全局安装
npm i -g webpack
npm i -D 是 npm install --save-dev 的缩写
创建文件
先构建基础的js和html文件：
- 页面入口文件 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack-test</title>
</head>
<body>
<div id="app">
<!-- 导入打包好的文件 -->
<script src="./dist/bundle.js"></script>
</div>
</body>
</html>
- 工具函数 show.js
// 操作 DOM 元素，把 content 显示到网页上
function show(content) {
window.document.getElementById('app').innerText = 'Hello,' + content;
}
// 通过 CommonJS 规范导出 show 函数
module.exports = show;
- 执行入口 main.js
// 通过 CommonJS 规范导入 css 模块
require('./main.css');
// 通过 CommonJS 规范导入 show 函数
const show = require('./show.js');
// 执行 show 函数
show('Webpack');
- wbbpack在执行构建时默认会从项目根目录
webpack.config.js文件读取配置信息，内容如下：
const path = require('path');
module.exports = {
// JS 执行入口文件
entry: './main.js',
output: {
// 把所有依赖的模块合并输出到一个 bundle.js 文件
filename: 'bundle.js',
// 输出文件都放到 dist 目录下
path: path.resolve(__dirname, './dist'),
},
module: {
rules: [
{
// 用正则去匹配要用该 loader 转换的 css 文件
test: /\.css$/,
loaders: ['style-loader', 'css-loader'],
}
]
}
};
运行webpack构建会生成
bundle.js，为打包好的文件，包含了main.js、show.js等模块
测试
此时的package.json
{
"name": "dive-into-webpack",
"version": "1.0.0",
"scripts": {
"build": "webpack"
},
"dependencies": {},
"devDependencies": {
"css-loader": "^0.28.4",
"style-loader": "^0.18.2",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0"
}
}
执行：
npm run build
报错：
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
- webpack-cli (https://github.com/webpack/webpack-cli)
The original webpack full-featured CLI.
- webpack-command (https://github.com/webpack-contrib/webpack-command)
A lightweight, opinionated webpack CLI.
We will use "npm" to install the CLI via "npm install -D".
这里提示安装 webpack-cli
是因为到了webpack4, webpack 已经将 webpack 命令行相关的内容都迁移到webpack-cli，所以除了 webpack 外，我们还需要安装 webpack-cli：
npm i -D webpack-cli
重新执行：
npm run build
此时生成dist文件夹，里面为
bundle.js文件
在浏览器内打开index.html文件可以看到
Hello,Webpack
使用 DevServer
提供HTTP服务
监听文件变化自动刷新，实时预览
支持Source Map
安装 DevServer
npm i -D webpack-dev-server
执行 DevServer
在 package.json 里添加
"scripts": {
"dev": "webpack-dev-server",
"build": "webpack"
},
运行
npm run dev
此时提示：
Project is running at http://localhost:8080/
webpack output is served from /
注意：
此时我们删除之前使用webpack构建的
dist静态目录
在浏览器访问http://localhost:8080/就可以打开index.html为空白，因为路径已经不是./dist/bundle.js，DevServer会将Webpack构建的文件存在内存中，跳过webpack.config.js的output.path属性，所以更改为直接访问./bundle.js
测试 DevServer
此时修改
main.js、show.js等文件，保存后浏览器就自动刷新，运行处修改后的结果
核心
在 webpack中文文档 中第一部分有详细的叙述，可以了解一下它的6个核心配置项：
Entry、Module、Chunk、Loader、Plugin、Output
二、实战
使用CSS和CSS预处理语言
配置Loader
下面的代码是从右到左依次适配的
loader: 'style-loader!css-loader!less-loader'
使用 CSS 和 LESS
npm i -D style-loader css-loader
npm i -D less-loader less
在 webpack.config.js rules里添加
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
测试
新建
main.less文件
在main.js中引入
require('./main.less');
写入样式
<style>
#app {
background: gray;
p{
color: red;
}
}
</style>
启动后查看界面效果
使用 SASS
使用SASS（SCSS）需要安装
node-sass，node-sass核心使用C++编写，在用Node.js封装了一层，以提供其他Node.js调用
先全局安装
npm i -g node-sass
再执行编译命令
# 将 main.scss 源文件编译成 main.css
node-sass main.scss main.css
/
在 webpack.config.js rules里添加
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
}
css压缩打包（测试失败，研究后发现4.x貌似不需要这些了，之前3.x之类使用的都无效了）
安装 mini-css-extract-plugin
# webpack4.x 使用 mini-css-extract-plugin
npm i -D mini-css-extract-plugin css-loader
在 webpack.config.js 中设置配置
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
...
plugins: [
...
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
使用ES6
Babel
Babel是一个javascript编辑器，能将ES6代码转换为ES5代码，会从根目录下的.babelrc文件读取配置，为JSON格式的文件，例如：
{
"presets": ["env"],
"plugins": [
[
"transform-runtime",
{
"polyfill": false
}
]
]
}
env自动匹配所有的最新语法 替代之前的es2015写法
配置项
Plugins
告诉Babel要使哪些插件，这些插件可以控制如何控制转换代码，例如安装
transform-runtime插件，全名babel-plugin-transform-runtime，此插件作用是减少冗余代码
npm i -D babel-plugin-transform-runtime
Presets
告诉Babel要转换的源码使用了哪些新的语法特性，例如：
es2015
npm i -D babel-preset-es2015
接入Babel
在webpack配置rules添加
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}
添加devtool
# 输出 source-map 以方便直接调试 ES6 源码
devtool: 'inline-source-map'
安装所需依赖
# Webpack 接入 Babel 必须依赖的模块
npm i -D babel-core babel-loader
# 根据我们的需求选择不同的 Plugins 或者 Presets
npm i -D babel-preset-env
# 安装 es2015
npm i -D babel-preset-es2015
测试
之前使用
CommonJS规范进行模块的引入和导出，现在更改为ES6规范
main.js
// 通过 ES6 规范导入 css 模块
import './main.css';
import './main.less';
// 通过 ES6 模块化规范导入 show 函数
import { show } from './show';
// 执行 show 函数
show('Webpack');
show.js
// 操作 DOM 元素，把 content 显示到网页上
export function show(content) {
window.document.getElementById('app').innerText = `Hello,${content}`;
}
其中
`Hello,${content}`为ES6语法，然后启动运行，效果同'Hello,' + content
