初始化工程
代码语言：javascript复制npm init -y # 初始化npm配置⽂件
npm install --save-dev webpack@4.43.0 # 安装核⼼库
npm install --save-dev webpack-cli@3.3.12 # 安装命令⾏⼯具配置.npmrc设置npm源为淘宝镜像
⼤家⼀开始使⽤ npm 安装依赖包时，肯定感受过那挤⽛膏般的下载速度，上⽹⼀查只需要将 npm 源设 置为淘宝镜像源就⾏，在控制台执⾏⼀下以下命令： npm config set registry https://registry.npm.taobao.org
添加⼀个 .npmrc 并做简单的配置即可：
代码语言：javascript复制# 创建 .npmrc ⽂件
# 在该⽂件内输⼊配置
registry=https://registry.npm.taobao.org/创建src⽬录及⼊⼝⽂件
创建webpack配置⽂件，默认配置
代码语言：javascript复制# 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
代码语言：javascript复制# 安装
npm install style-loader css-loader -D
# 配置webpack.config.js中配置项
module: {
rules: [
{
test: /.css$/,
use: ["style-loader", "css-loader"],
},
],
},集成less sass
代码语言：javascript复制# 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""]
}
]集成postcss:
Github:https://github.com/postcss/postcss 相当于babel于JS postcss主要功能只有两个：第⼀就是把css解析成JS可以操作的抽象语法树AST，第⼆就是调⽤插件来处理AST并得到结果；所以postcss⼀般都是通过插件来处理css，并不会直接处理 ⽐如： ⾃动补⻬浏览器前缀: autoprefixer css压缩等 cssnano
代码语言：javascript复制npm install postcss -D
npm install postcss-loader autoprefixer cssnano -D配置postcss
代码语言：javascript复制# 根目录创建postcss.config.js
# 配置postcss.config.js
module.exports = {
plugins: [require("autoprefixer")],
};
# 配置package.json
"browserslist":["last 2 versions", "> 1%"],
# 或者直接在postcss.config.js⾥配置
module.exports = {
plugins: [
require("autoprefixer")({
overrideBrowserslist: ["last 2 versions", "> 1%"],
}),
],
};
# 或者创建.browserslistrc⽂件
> 1%
last 2 versions
not ie <= 8webpack.config.js中配置,postcss-loader在css-loader前面
代码语言：javascript复制 {
test: /.less$/,
use: ['style-loader', 'css-loader','postcss-loader', 'less-loader']
}样式⽂件分离和自动清空dist目录
经过如上⼏个loader处理，css最终是打包在js中的，运⾏时会动态插⼊head中，但是我们⼀般在⽣产环境会把css⽂件分离出来（有利于⽤户端缓存、并⾏加载及减⼩js包的⼤⼩），这时候就⽤到 mini-cssextract-plugin 插件。 ⼀般⽤于⽣产环境
代码语言：javascript复制# 安装
npm install mini-css-extract-plugin -D
npm install clean-webpack-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 CleanWebpackPlugin(),//清空dist目录插件
new MiniCssExtractPlugin({
filename: '[name].css', // 输出⽂件的名字
// ... 其他配置
}),
]
};自定义loader
webpack.config.js中使用自定义loader
loader路径为绝对路径，options参数，在loader中this.query获取
代码语言：javascript复制 {
test: /.js$/,
use: [{
loader: path.resolve(__dirname, './myloader/replace-loader.js'),
options:{
name:'老刘'
}
}]
},创建myloader文件夹 ，创建replace-loader.js文件
代码语言：javascript复制// 自定义loader
// 不能是箭头函数
// loader中的options在这里this.query中获取
// this.callback(error:Error|null,content:string|Butter,sourceMap?:SourceMap,meta?:any)
// 处理异步 this.async()
module.exports = function (source) {
console.log(this.query)
const callback = this.async()
console.log(333)
setTimeout(() => {
callback(null, source.replace('hellow', 'xx你的'))
}, 3000)
// return source.replace('hellow', '刘xxx ');
}为了避免自定义loader路径写的不优雅
webpack.config.js中配置
代码语言：javascript复制entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].js'
},
mode: 'development',
// 配置这个
resolveLoader:{
modules:['node_modules','./myLoader']
},
