使用下面这行命令进行全局安装
npm install -g webpack@4 webpack-cli@3
//或
yarn global add webpack@4 webpack-cli@3
用webpack转义JS
npm init -y
yarn add webpack@4 webpack-cli@3 --dev
下面我们来运行webpack，由于webpack不是全局安装，它在node_modules/.bin/webpack
所以我们调用本地安装的webpack时应该加上路径。
./node_modules/.bin/webpack --version
但是这样不够方便，
可以使用下边这条命令，自动寻找本地webpack地址。
npx webpack
但是npx不够稳定，在windows下不一定能用。
初始化webpack.config.js
现在我们来尝试消除上边出现的webpack警告,当我们仔细观察报错，发现是configuration的问题，于是我们在官方文档中查询。
var path = require('path');
module.exports = {
mode: 'development',
entry: './foo.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'foo.bundle.js',
},
};
但是并不是这段代码中所有内容我们都是需要的，我们只保留修改报错的部分。
var path = require('path');
module.exports = {
mode: 'development'
};
但是我们发现在development模式下，main,js被改变了
理解文件名中的hash的用途
webpack 配置 entry和output
我们将上边那段代码修改一下
var path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
}
};
这段代码的作用就是配置转移后的JS文件的入口、出口。
HTTP缓存的意义
我们修改config的代码如下：
var path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[contenthash].js',
}
};
转义的JS文件名改变，这里我们就需要理解HTTP缓存的意义。
HTTP缓存可以避免重复下载相同文件，加快访问网站速度。
但是一定要记住不能让首页index.html缓存，因为如果首页都缓存了，那么我们就无法知道其他页面是否需要更新。
当我们修改文件内容时，文件名的hash就会改变，提示我们缓存不能使用了要更新。
可是每当我们修改文件后运行一次
npx webpack
webpack插件自动生成HTML
官方文档
安装插件
yarn add html-webpack-plugin --dev
观察一下官方文档给的使用方法，自己整合一下。
如果在配置plugin和loader部分遇到报错时，复制下边这段代码到package.json，然后删除node_modules文件，再yarn install，再次重试即可。(注意webpack 、 webpack-cli版本号等内容要和自己本地一致)
{
"name": "webpack-demo-1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server",
"build": "rm -rf dist && webpack --config webpack.config.prod.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.2.0",
"dart-sass": "^1.23.7",
"file-loader": "^5.0.2",
"html-webpack-plugin": "^3.2.0",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"mini-css-extract-plugin": "^0.8.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.0.1",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"webpack": "4.46.0",
"webpack-cli": "3.3.12",
"webpack-dev-server": "^3.9.0"
}
}
webpack引入CSS
1. 使用JS生成style
yarn add style-loader --dev
yarn add css-loader --dev
记住，我们安装的loader版本要和package.json里对应。
可以使用JS生成style，也可以把CSS抽成文件。
如何预览呢？
cd dist
http-server . -c-1
为了方便我们快速开发，使用webpack-dev-server
webpack-dev-server不依赖dist目录文件，他直接在内存中就搞定了，不需要放到硬盘上，所以速度很快(比build方便)。
和http-server相比较，webpack-dev-server集成了更多的功能，自动刷新等。
对着文档CRM吧...
yarn add webpack-dev-server --dev
添加下图代码
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
}
"start": "webpack-dev-server --open",
完成，然后开始运行。
yarn start
2. 使用插件提取CSS文件
CRM官方文档MiniCssExtractPlugin
yarn add mini-css-extract-plugin --dev
使用两个webpack config文件
这么多插件、内容，如何学习呢？
仍然是CRM学习法(抄文档放到本地跑成功了以后修改微调一下再跑)，Google关键词看文档。
如果我们在生产环境需要上传代码，我们就使用yarn build
在两种不同模式下采用不同的config。
开发者模式下
mode: 'development',
生产模式下
mode: 'production',
但是我们会发现，这两种模式下，两个文件的代码基本都是相同的，我们没必要写成两个文件，而是应该采用继承的方式。
开发模式下大部分继承base，生产模式下
webpack的作用包括：
- 压缩代码
- 将一个或多个JS文件打包成对应的文件(webpack本身只能打包commonjs规范的JS文件，无需安装额外 loader，webpack 自带此功能)
- 将一个或多个CSS文件打包成对应的文件
- 将高版本的JS转译成低版本的JS
webpack-dev-server 的作用包括：
- 提供server方便开发预览
- 文件内容变化自动转译代码，并刷新页面
webpack 将 CSS 代码提取成单独的文件，需要用到什么 plugin？
MiniCssExtractPlugin
webpack 将 CSS 文件引入到 JS 中，并转为 style 标签插入到 head 标签里，需要用到什么 loader？
css-loader 和 style-loader
loader vs plugin
loader：一对一，一个文件转化成另一个文件。
plugin：多对一，多个文件转化成一个文件。
loader和plugin有什么区别呢？
loader就是加载器(用来load一个文件)，plugin就是插件(加强功能——外挂，虽然loader也变相的拓展了webapck，但是它只是专注于转化文件这一个领域，而plugin的功能更加丰富，不仅局限于资源的加载)。
plugin：一定要记住html-webpack-plugin(生成HTML文件) 和 MiNiCssExtractPlugin(抽取css代码把他变成一个文件)
引入SCSS
任意一个CSS文件的后缀直接改掉，就是一个SCSS。
node-sass已经过时，请使用dart-sass。
CRM开始整sass-loader文档
yarn add sass-loader dart-sass --dev
引入LESS和Stylus
yarn add less-loader --dev
yarn add stylus-loader stylus --dev
SASS, LESS, Stylus完全没有区别。
使用file-loader引入图片
yarn add file-loader stylus --dev
作用是把文件变成文件路径
webpack import()懒加载
如何实现懒加载：用import()去加载一个文件，会得到一个promise(因为异步)，promise.then前边写成功函数，后边写失败函数。
webpack一键部署到github
我们不一定只有在dist目录里才能预览，这里介绍一种新方法。
//新建一个分支
git branch gh-pages
//进入一个分支
git checkout gh-pages
把dist里边的文件都拷贝到当前目录然后删除dist
mv dist/* ./
rm -rf dist
这样我们就有两个分支了，master分支用来存源代码，gh-pages用来预览。
虽然成功了，可是每次上传都要(删除源代码->dist目录文件移出->删除dist目录)，这样也太麻烦了吧。
