1. 全局安装webpack
npm install --global webpack
2. 本地安装webpack
npm install webpack
3. 初始化
npm init
4.新建目录 app文件夹、public文件夹、webpack.config.js
(1) 新建app/Greeter.js app/main.js app/style.scss
(2) 新建public/index.html
5.创建编写源代码文件
(1) 入口文件main.js
(2) html中的title标签可以用<%= htmlWebpackPlugin.options.title %>代替（后续会在webpack配置文件中定义title并插入这里）
6.安装依赖 --save-dev
"css-loader": "^1.0.1", //使你能够使用类似@import 和 url(…)的方法实现 require()的功能；
"extract-text-webpack-plugin": "^3.0.2", //将css文件和js文件打包的时候独立分开，可以使用extract-text-webpack-plugin插件,在webpack4+版本以后已经有mini-css-extract-plugin插件来代替它。
"file-loader": "^2.0.0", //就是将文件（一般是图片文件为主，其他的包括字体文件等），在进行一些处理后（主要是处理文件名和路径），移动打包后的目录中；
"html-webpack-plugin": "^3.2.0", //简单点说，就是原本我们在打包完js、css文件之后，还需要在html中手动引入。
该插件能帮助我们在生成css、js文件的同时将这些文件自动引入到我们的输出html文件中（一般来说，我们使用这个插件的时候，
需要在配置中为它提供源模板、文件名、chunk等等，可以参考后面的配置文件代码。
"node-sass": "^4.10.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1", //将所有的计算后的样式加入页面中；
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2"
7. 编写webpack.config.js,webpack配置 /入口entry、出口output、loader、插件plugins
8. 在package.json的scripts增加npm命令
9.css相关打包说明
我们安装的loader有如下
css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能；
style-loader将所有的计算后的样式加入页面中；
在我们没有对样式文件的打包做额外配置时，使用style-loader自动将css代码放到生成的style标签中插入到head标签里。如果想要将样式文件单独打包，需要使用使用extract-text-webpack-plugin插件。
我们也要安装一些 打包css样式相关的插件：（–save-dev是将插件添加到devDependencies中）
webpack 4+版本问题问题影响，使用extract-text-webpack-plugin插件可能会发生版本相关问题的报错，使用npm install extract-text-webpack-plugin@next --save-dev
10.关于extract-text-webpack-plugin(API)
new ExtractTextPlugin([id: string], filename: string, [options])
id此插件实例的唯一标识。（仅限高级用法;默认情况下，自动生成）
filename结果文件的文件名。可能包含[name]，[id]和[contenthash]。
[name] 块的名称
[id] 块的标识
[contenthash] 提取文件内容的哈希值
options
allChunks 从所有其他块中提取（默认情况下，它仅从初始块中提取）
disable 禁用插件
ExtractTextPlugin.extract([notExtractLoader], loader, [options]
从现有加载器创建提取加载器。
notExtractLoader（可选）在未提取css时应使用的加载程序（即在其他块中时allChunks: false）
loader 应该用于将资源转换为css导出模块的加载器。
options
publicPath覆盖publicPath此加载程序的设置。
11.mini-css-extract-plugin插件
将css单独打包成一个文件的插件，它为每个包含css的js文件都创建一个css文件。它支持css和sourceMaps的按需加载。目前只有在webpack V4版本才支持使用该插件
和extract-text-webpack-plugin相比：
异步加载
无重复编译，性能有所提升
用法简单
之支持css分割
12.clean-webpack-plugin插件
一个webpack插件，用于在构建之前删除/清除构建文件夹。也就是说我们在安装使用这个插件之后，我们每次run build会自动帮我们清除之前的文件，再用打包生成的新的文件代替
使用：
npm install clean-webpack-plugin --save-dev
在webpack中导入，插件中配置
const{ CleanWebpackPlugin }= require('clean-webpack-plugin'); //引入删除构建文件夹插件
plugins: [
new CleanWebpackPlugin()
]
13.开启sourcemap
1. js的sourcemap
在entry与outry的同级下 增加 devtool: 'inline-source-map'
2. 样式的sourcemap
在css-loader后挂参数sourceMap css-loader?sourceMap
14.webpack-dev-server
概念：webpack-dev-server提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)，能够用于快速开发应用程序
npm install --save-dev webpack-dev-server
在webpack中添加devServer
devServer:{
host: 'localhost', // 服务主机号
port: 8090, // 服务端口号，可以按需要改
inline: true,
hot: true, // 启用HMR
contentBase: path.resolve(__dirname,'../build'), // 告诉服务器从哪里提供内容
compress: true // 一切服务都启用gzip 压缩
}
在package.json的dev命令中进行修改
"dev": "webpack-dev-server --open --public localhost:8090",
我们在定义主机号的时候，可以设置为“0.0.0.0”，理由是这样设置之后我们既可以通过localhost（本地访问），也可以通过IP访问，比较方便（移动端开发的时候用手机访问同一网络，可以通过IP访问调试）。
15.HRM
模块热替换（热更新），该功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。
实现：
1.引入webpack
const webpack = require('webpack');
2.在plugin启用功能
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
3.修改入口文件（main.js），当引用的文件(app.js)内部发生变更时可以告诉webpack接受更新的模块。
if (module.hot) {
module.hot.accept('./app.js', function() {
console.log('Accepting the updated printMe module!');
// 引入的文件的操作
// ........
})
}
16.webpack之缓存机制+hash
1. hash
output: {
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
}
filename: '[name].[hash:8].js', //指定长度为8位字符串
2. chunkhash
filename: '[name].[chunkhash].js', // chunkhash就是模块的hash，也就是根据模块内容计算的hash值。
主模块之间的hash名称相同
3. contenthash
它是根据文件内容来定义hash值得，所以我们就可以使用插件extract-text-webpack-plugin定义的contenthash来打包
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css"
})
常见知识点
17. webpack多入口文件配置
(1).进行入口处entry配置
entry: {
home: resolve(__dirname, "src/home/index.js"),
about: resolve(__dirname, "src/about/index.js")
}
(2).配置多个ExtractTextPlugin,确保每个页面的 ExtractTextPlugin， 只处理这个页面的样式文件,进行各自的ExtractTextPlugin声明
// 为每个页面定义一个 ExtractTextPlugin
const homeExtractCss = new ExtractTextPlugin('home/[name].[contenthash].css')
const aboutExtractCss = new ExtractTextPlugin('about/[name].[contenthash].css')
// ...
module: {
rules: [
// 每个页面的 ExtractTextPlugin 只处理这个页面的样式文件
{
test: /src(\\|\/)home(\\|\/)css(\\|\/).*\.(css|scss)$/,
use: homePageExtractCss.extract({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader', 'sass-loader']
})
},
{
test: /src(\\|\/)about(\\|\/)css(\\|\/).*\.(css|scss)$/,
use: salePersonalCenterExtractCss.extract({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader', 'sass-loader']
})
}
]
}
// ...
// 每个页面都有各自的 ExtractTextPlugin，所以需要都声明一遍
plugins: [
homeExtractCss,
aboutExtractCss
]
(3).有几个页面，就对每个页面进行上述配置即可。
new HtmlWebpackPlugin({
filename: 'home/home.html',
template: 'src/home/html/index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true
}
})
new HtmlWebpackPlugin({
filename: 'about/about.html',
template: 'src/about/html/index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true
}
})
