webpack使用入门（配置loader：style、css、url、file、babel；plugin：html-webpack、mini-css-extract、clean-webpack）
目录
webpack介绍
使用方法
解决webpack-cli和webpack-dev-server版本冲突问题
构建基本框架
不使用webpack.dev.js文件打包
使用webpack.dev.js文件打包
简化webpack命令行
引入jquery模块
通过html-webpack-plugin插件生成html（自动引入js代码）
loader导入css文件
分离css文件
loader导入less文件
加载图片
清除dist目录插件
es6向下兼容es5
生产环境打包文件
提取公共模块配置
使用他人的文件
plugin链接
loader链接
webpack介绍
一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源（把一堆的css文件和js文件放在一个总的入口文件，通过require引入，剩下的事情webpack会处理，包括所有模块的前后依赖关系，打包、压缩、合并成一个js文件，公共代码抽离成一个js文件、某些自己指定的js单独打包，模块可以是css/js/imsge/font等等）。
下面是webpack包含的一些模块。
使用方法
首先使用命令行全局安装webpack、webpack-cli、webpack-dev-server，其中webpack-cli需要指定版本号，因为默认安装的最新是4点几的版本和webpack-dev-server最新3点几的版本冲突。以下命令行代码都是在当前文件夹下运行，-D表示下载为本地项目依赖和-save-dev相同，然后npm install和yarn add相同都是下载文件
命令行：npm install webpack [email protected] webpack-dev-server -g安装全局webpack命令。
已安装了最新版本的可以通过下面方法解决。
解决webpack-cli和webpack-dev-server版本冲突问题
- npm i [email protected] -D
-
将webpack.config.js中"start"修改如下：
"scripts": {
"build": "node_modules/.bin/webpack --config webpack.config.js",
"start": "webpack serve --config webpack.config.js --open "
}
构建基本框架
在项目文件夹（取名不要为webpack）下创建src、dist、config文件夹，然后通过npm init -y创建package.js文件。然后在dist文件夹下创建index.html（主网页代码），在src文件夹下创建index.js文件，再次安装npm install webpack [email protected] webpack-dev-server -D（因为配置文件需要使用到require等语句导入webpack中的模块）。
不使用webpack.dev.js文件打包
webpack4点几提供的新打包命令，当需要加载css、图片（加载插件和使用loaders等）等时还是需要使用webpack.dev.js打包。
在命令行中输入webpack --mode=development （打包模式为开发者环境）或webpack --mode=production（打包模式为生产者环境，经过压缩了，不会打包一些未使用的代码），最后在dist的文件夹下会生成main.js文件。
使用webpack.dev.js文件打包
紧接构建基本框架后，并在src文件夹下创建main.js，在config文件下创建webpack.dev.js。编辑webpack.dev.js文件如下图，参数含义如下：
其中entry为入口通过数组包裹多个入口文件名（此时会将数组中的多个文件打包成一个文件，要想打包成输出多个文件，可给entry对象添加属性index:['./src/main.js']，这时便会多生成一个打包文件index-bundle.js），mode为模式可以为development和production，output为出口只能有一个出口，filename代表出口文件名[name]代表入口文件的main，生成的文件名为main-bundle.js（该文件包含所有js文件，在index.html中便只需要导入该文件），path为路径path.resolve()会返回路径名（将参数进行拼接后的路径名，若字符以 / 开头，不会拼接到前面的路径；若以 ../ 开头，拼接前面一个参数的路径，该参数不含最后一节路径；若以 ./ 开头或者没有符号 则拼接前面路径），__dirname代表当前文件的绝对路径（不包含文件名），代码中的意思是返回dist文件的绝对路径。publicPath为设置当前的路径名，例如'/'时，在index.html中引入main-bundle.js就需要通过'/main-bundle.js'或'main-bundle.js'；而为'/js'时，就需要通过'/js/main-bundle.js'引入。devServer代表本地服务器，contentBase代表设置http://localhost:8080/访问的基础路劲为dist文件即直接访问indexl.html（未设置的话http://localhost:8080/会打开项目的目录），overlay让错误信息可以在网页中显示，port代表本地的端口默认为8080，open为是否自动打开网页。
const path = require('path')
module.exports = {
entry: {
main: ['./src/main.js','./src/index.js']
},
mode: 'development',
output: {
filename: '[name]-bundle.js',
path: path.resolve(__dirname, '../dist'),
publicPath:'/'
},
devServer:{
contentBase: 'dist',
overlay: true,
port:8080,
open:true
},
// module:{
// rules:[
// {
// test:/\.css$/,
// use:[
// {
// loader:'style-loader'
// },
// {
// loader:'css-loader'
// }
// ]
// }
// ]
// }
}命令行中运行webpack --config=config/webpack.dev.js（按照webpack.dev.js中的配置打包文件）然后会在dist文件夹下生成main-bundle.js，最后输入webpack-dev-server --config=config/webpack.dev.js（按照webpack.dev.js中的配置把项目布置到本地服务器上，可以不用生成main-bundle.js即可以在上一个命令前执行），便可以在网页上打开http://localhost:8080/访问到index.html文件，而index.html文件便可以通过引入main-bundle.js引入index.js和main.js。
简化webpack命令行
修改package.json中的script标签，如下图添加start和build。这时npm start命令便等于webpack-dev-server --config=config/webpack.dev.js。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start":"webpack-dev-server --config=config/webpack.dev.js",
"build":"webpack --config=config/webpack.dev.js"
}引入jquery模块
在命令行输入npm install jquery -D，然后在main.js中通过const $=require('jquery')，之后再main.js中便可以通过$符号来使用jQery函数。
通过html-webpack-plugin插件生成html（自动引入js代码）
将index.html移入src文件夹下，运行命令行npm install html-webpack-plugin -D安装插件，配置webpack.dev.js中写入const HtmlWebpackPlugin = require('html-webpack-plugin')用于引入自动生成html的插件，给module.export指向的对象添加属性plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })]，其中template指定的模板便是移入src文件夹下的index.html的路径，这里需要注意虽然我的webpack.dev.js文件是在config文件夹下，但是这里的相对路劲./依然指的是项目路径即config的上层路径。最后运行webpack --config=config/webpack.dev.js后会在dist文件上生成一个index.js文件，该文件中会自动引入main-bundle.js即打包后的出口文件（不需要手动引入了）。
loader导入css文件
在src文件夹下创建main.css在main.js中通过require('./main.css')引入，命令行输入npm install style-loader css-loader -D安装css-loader（能识别CSS并加载，支持模块化、压缩、文件导入等特性）和style-loader（通过动态创建style标签的方式，让解析后的css内容能够作用到页面中）。然后将webpack.dev.js图中注释内容打开即可（test是通过正则表达式匹配文件，use中为使用的loader），再次运行webpack-dev-server --config=config/webpack.dev.js便可以在http://localhost:8080/中看到添加了css的index.html文件。在devServer中添加属性overlay:true可以使错误信息不仅在命令行中显示，还会在页面中显示。
分离css文件
命令行输入npm install mini-css-extract-plugin -D安装分离插件，在webpack.dev.js中输入const MiniCssExtractPlugin = require('mini-css-extract-plugin')，将之前配置style-loader的对象替换为{loader:MiniCssExtractPlugin.loader}，最后在plugins的数组中添加new MiniCssExtractPlugin({filename:'./index.css'})即可，filename代表分离出来的css名字和地址，这里注意./表示的位置是dist文件夹下。
loader导入less文件
less是css预处理文件，引入了变量函数等是css处理更灵活。首先命令行输入npm install less less-loader -D，然后在src文件夹下创建iheader.less文件，在main.js中写入require('./header.less')，然后配置ebpack.dev.js，在rules数组中添加{test: /\.less$/i,use: ["style-loader","css-loader","less-loader",],}，注意这里还是会生成style标签插入，想要分离出来，把"style-loader"替换为{loader:MiniCssExtractPlugin.loader}，这时less文件也会被分离到index.css中。
加载图片
命令行输入npm install url-loader file-loader -D，配置webpack.dev.js文件，在rules数组中添加对象{test: /\.(png|jpg|gif)$/i,use: [{loader: 'url-loader',options: {limit: 8192,name:'[name].[ext]',publicPath:'images/',outputPath:'images/'}}]}即可，这时可以在css和less文件中使用图片，（这里的图片会被默认转换为base64字符串格式，好处是浏览器不用发送请求了，直接可以读取，坏处是图片如果太大，会导致转换后体积增大30%，所以这里设置了大小限制limit，表示当大于8kb时，在dist文件夹中创建images文件夹，在该文件夹下生成图片，通过链接导入，小于时才会base64转换），注意css和less文件中使用图片的地址是src下的图片和文件的相对地址，而html中img标签使用的地址是publicPath（静态资源的引用路径）。
清除dist目录插件
命令行输入npm install clean-webpack-plugin -D，在webpack.dev.js中输入const { CleanWebpackPlugin } = require('clean-webpack-plugin')，然后在plugins数组中添加new CleanWebpackPlugin()即可，这时我们每次输入命令行webpack --config=config/webpack.dev.js后都会先清空dist文件夹，然后在生成打包的文件。
es6向下兼容es5
命令行输入npm install -D babel-loader @babel/core @babel/preset-env，在webpack.dev.js中rules数组下添加对象{test: /\.m?js$/,exclude: /(node_modules|bower_components)/,use:{ loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}}，此时如果在main.js写了es6的语法会被转换成es5（在最后的输出文件main-bundle.js可以查看）。
生产环境打包文件
命令行输入npm install webpack-merge -D，在config文件夹下新建文件webpack.pro.js（生产环境配置）和webpack.base.js（公用配置），之前的webpack.dev.js是开发环境的配置。配置webpack.base.js，将之前webpack.dev.js的内容全部复制过去，去除devServer和mode属性，然后在重新配置webpack.dev.js为下图代码，接着配置webpack.pro.js同样为下图，不同在于去除devServer属性并将mode改为'production'即可（下图中参数其中meige()中可以传入多个对象，会将多个参数合并成一个对象，如果有重复属性名，后面的对象属性会覆盖前面的）。
const base = require('./webpack.base');
const {merge} = require('webpack-merge');
module.exports = merge(base, {
mode: 'development',
devServer: {
contentBase: 'dist',
overlay: true,
port: 8080,
open: true
}
})此时可以通过webpack --config=config/webpack.dev.js打包为开发环境的，通过webpack --config=config/webpack.pro.js打包为生产者环境。
提取公共模块配置
当有多入口文件生成多个打包文件时，如果入口文件中都用到jQuery，需要都引入，这时打包文件会重复打包jquery，需要重新配置在webpack.base的module.exports对象中添加属性optimization: {splitChunks: {chunks: 'all'}}，这时便会提取公共模块配置。不会重复打包重复的模块。
使用他人的文件
需要config文件，src文件，pack.json文件，然后进入到项目文件中命令行输入yarn即可安装他人所有局部依赖，这样便可以通过之前命令打包和布置本地服务器上使用。
plugin链接
https://v4.webpack.js.org/plugins/
loader链接
https://v4.webpack.js.org/loaders/