这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战
安装：
//初始化
npm init -y //初始化npm配置⽂件
npm install --save-dev webpack //安装核⼼库
npm install --save-dev webpack-cli //安装命令⾏⼯具
在使用过程中npm比较慢，大家可以把npm源设置为淘宝镜像源，执行命令：
npm config set registry https://registry.npm.taobao.org
但是如果其他同事没有设置这个，或者并不知道如何设置，我们可以添加一个文件，自动设置
//在根目录创建 .npmrc ⽂件
touch .npmrc
//在该⽂件内输⼊配置
registry=https://registry.npm.taobao.org/
创建src目录和入口文件，创建webpack配置文件（默认配置）
//webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./dist"),
filename: "[name].js",
},
mode: "development",
};
样式处理
集成css样式处理：css-loader-style-loader，并创建index.css
//安装
npm install style-loader css-loader -D
//配置
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
}
集成Less sass
//安装
//sass
npm install node-sass sass-loader -D
//less
npm install less less-loader -D
//配置
rules:[
{
test: /\.scss$/,
use: ["style-loader","css-loader","sass-loader"]
},
{
test: /\.less$/,
use: ["style-loader","css-loader","less-loader""]
}
]
样式文件分离
经过前面两个loader的处理，css最终是打包在js中的，运行时会动态插入head中但是在生产环境会把css文件分离出来，有利于客户端缓存，并行加载及减少js包的大小，所以可以使用mini-cssextract-plugin插件（常用于生产环境）
//安装
npm install mini-css-extract-plugin -D
//使⽤
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
module: {
rules: [
{
test: /\.less$/,
use: [
// 插件需要参与模块解析，须在此设置此项，不再需要style-loader
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: true, // 模块热替换，仅需在开发环境开启
// reloadAll: true,
// ... 其他配置
}
},
'css-loader',
'postcss-loader',
'less-loader'
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css', // 输出⽂件的名字
// ... 其他配置
}),
]
};
图片和静态文件
使用到url-loader和file-loader，url-loader可以限制文件大小，会返回dataUrl，不会输除真实的文件，可以减少请求次数。
//安装
npm install url-loader file-loader -D
//⼊⼝⽂件
import pic from "./logo.png";
var img = new Image();
img.src = pic;
img.classList.add("logo");
var root = document.getElementById("root");
root.append(img);
//使⽤
module.exports = {
modules: {
rules: [
{
test: /\.(png|jpg|gif|jpeg|webp|svg|eot|ttf|woff|woff2)$/,
use: [{
loader: 'url-loader', // 只要配置url-loader即可，内部会⾃动调⽤file-loader
options: {
limit: 10240, //限制大小，⼩于10240的⽂件会被转换成DataURL
name: '[name]_[hash:6].[ext]', // 设置输出⽂件的名字
outputPath: 'assets', // 设置资源输出的⽬录
}
}],
exclude: /node_modules/
}
]
}
}
注：limit设置太大会导致js文件加载变慢，并且要配合加载速度和网络请求次数。如果有图片压缩要求，可以使用：image-webpack-loader
HTML页面处理
可以使用htmlwebpackplugin会在打包结束后，⾃动⽣成⼀个html⽂件，并把打包⽣成的js模块引⼊到该html 中。
//安装
npm install --save-dev html-webpack-plugin
//配置
title: ⽤来⽣成⻚⾯的标题
filename: 设置的⽂件名，默认是index.html, 也可以直接配置带有⼦⽬录。
template: 模板⽂件路径，⽀持加载器，⽐如 html!./index.html
inject: true | 'head' | 'body' | false ,注⼊所有的资源到特定的template或templateContent 中，如果设置为true或者 body，所有的js文件会被放置到 body
元素的底部，'head' 会被放置到 head 元素中。
favicon: 添加特定的 favicon 路径到输出的 HTML ⽂件中。
minify: {} | false , 传递 html-minifier 选项给 minify 输出
hash: true | false,默认添加⼀个唯⼀的webpack编译hash到所有包含的脚本和CSS⽂件，对于解除cache缓存很有⽤。
cache: true | false,默认在⽂件修改之后才会发布⽂件。
showErrors: true | false, 如果为 true, 这是默认值，错误信息会写⼊到 HTML ⻚⾯中
chunks: 允许只添加某些块 (⽐如，仅仅 unit test 块)
chunksSortMode: 允许控制块在添加到⻚⾯之前的排序⽅式，⽀持的值：'none' | 'default' |{function}-default:'auto'
souceMap
通过sourceMap找到源码，在开发环境dev中默认开启
devtool:"none" //生产环境关闭配置
source-map产生.map文件
devtool:"cheap-module-eval-source-map",// 开发环境配置
devtool:"cheap-module-source-map", // 线上⽣成配置，线上不推荐开启
Hot Module Replacement热模块替换
css:不支持抽出来的css文件，需要用到style-loader，并且不⽀持contenthash，chunkhash
js:需要使⽤module.hot.accept来观察模块更新从⽽更新
//配置启动
devServer: {
contentBase: "./dist",
open: true,
hot:true,
hotOnly:true //即便HMR不⽣效，浏览器也不⾃动刷新，就开启hotOnly
}
const webpack = require("webpack");
//配置插件的地方添加：
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: "src/index.html"
}),
new webpack.HotModuleReplacementPlugin()
]
上面就是常用的一些配置
