才学完webpack4.0,webpack出5.0了,脑壳昏昏！！

1.安置node

2.新建一个文件夹，打开cmd，进入该文件夹使用npm来下载根基依赖配置

npm install init -y　

得到package.json文件，存放项目名称，各类依赖，插件等版本号

npm install webpack webpack-cli　

下载webpack以及脚手架

得到 node_modules 文件，依赖以及插件等都在这里面

手动创建以下文件

index.html：打包需要的模板

main.js：打包的入口

webpack.config.js：webpack核心配置文件

1 //webpack.config.js文件 2 let path = require(‘path‘)　　//node自带的成果，不需要下载， 3 module.exports = { 4 entry:‘./src/main.js‘, 5 output:{ 6 mode:‘development‘, 7 path:path.resolve(__dirname,‘public‘), 8 filename:‘js/[name][hash:6].js‘ //打包完成的文件在public/js里面 9 } 10 }

entry:　入口文件

output:　出口文件配置

mode:　　设置模式，development:开发模式，production：出产模式

path:　　打包后文件存放的路径，__dirname为当前文件夹，创建一个public文件来生存打包的文件

filename:　　打包后的文件名称，打包在js文件里面

[name]：当前文件名称

[hash:6]:　　设置一个哈希值，哈希值的长度为6，哈希值可以防备文件名斗嘴

接下来我们可以使用npx webpack来打包，这时你会看到一个public文件，打包的内容都在里面，不过只能看到js文件，因为html文件还没配置

npm install html-webpack-plugin -D　　//下载html-webpack-plugin插件来措置惩罚惩罚html文件

1 let HtmlWebpackPlugin = require(‘html-webpack-plugin‘) 2 3 module.exports = { 4 plugins:[ 5 new HtmlWebpackPlugin({ 6 template:‘index.html‘,//使用的模板 7 filename:‘index.html‘,//打包出来的文件名称 8 minify:{//优化操纵 9 removeAttributeQuotes:true, //去失双引号 10 collapseWhitespace:true //去失空格 11 }, 12 }) 13 ] 14 }

plugins：插件集，webpack的插件都放在里面，通过new来使用

css措置惩罚惩罚：

npm install css-loader style-loader less-loader -D

module.exports = { module:{ rules:[ { test:/\.css$/, //正则表达式来匹配所有.css文件 use:[‘style-loader‘,‘css-loader‘] },{ test:/\.less$/, //匹配所有.less文件 use:[‘style-loader‘,‘css-loader‘,‘less-loader‘] } ] } }

module：模块，里面存放的都是loader的配置

loader：能将所有类型的文件转化为webpack能够措置惩罚惩罚的模块，webpack只能措置惩罚惩罚js的模块，loader默认是从右致左，从下致上执行的

rules：匹配法则

test：正则表达式进行匹配相应的文件

use：设置转化是具体使用的loader

style-loader：将模块的导出作为样式，使用style标签导入到DOM中

css-loader：解析css文件，使用import进行加载，并且返回css样式

less-loader：将less文件转化为webpack可识另外css

第二种css配置要领以及添加css前缀

npm install mini-css-extract-plugin　　将所有的css提取到单独的文件中，为每个包罗css的js文件创建一个css文件

npm install postcss-loader autoprefixer　　给css添加兼容的前缀

//webpack.config.js文件 let MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘) module.exports = { module:{ rules:[ { test:/\.css$/, //正则表达式来匹配所有.css文件 use:[ MiniCssExtractPlugin.loader, ‘css-loader‘, ‘postcss-loader‘ ] },{ test:/\.less$/, //匹配所有.less文件 use:[ MiniCssExtractPlugin.loader, ‘css-loader‘, ‘postcss-loader‘, ‘less-loader‘ ] } ] }, plugins:[ new MiniCssExtractPlugin({ filename:‘./css/main[hash].css‘ }) ] }
//filename：css文件打包的目录以及文件名称
//需要的文件都在main.js文件中使用require去引用
//也可以import引入css
//index.js
requier(‘./css/***.css‘)
require(‘./css/***.less‘)