1.webpack是干什么的？？？
1.转译代码
2.构建build
3.代码压缩
4.代码分析
2.webpack的安装
直接采用官网的方法,我是和官网一样采用局部安装，没有使用全局，webpack升级后现在要安装webpack和对应的webpack-cli版本不一定是一样的。
3.webpack的使用
每一个插件的使用在官网都可以找到具体的方法
用webpck转译JS，png。css,stylus,scss,less,使用哪个就要在webpack.config.js 文件中添加对应的语句，并且安装对印的插件。例如要解析scss
就要使用一下命令：yarn add style-loader --dev 并且安装好yarn add css-loader --dev,安装好对应的loader就好，官网使用的是npm。
const HtmlWebpackPlugin = require("html-webpack-plugin");const MiniCssExtractPlugin = require('mini-css-extract-plugin');var path = require('path');module.exports = { devServer:{ contentBase:'./dist', }, entry: './src/index.js', output: { filename: '[name].[contenthash].js' }, plugins:[new HtmlWebpackPlugin( { title:'MY APP', template:'./src/assets/index.html'// }), ], module: {
mode:'production',//有development模式 plugins:[ new MiniCssExtractPlugin({ filename: '[name].[contenthash].css', chunkFilename: '[id].[contenthash]css'})
],
rules: [ { test:/\.(png|svg|jpg|gif)$/, use:["file-loader"] }, // 有问题 { test: /\.less$/, use: ['style-loader','css-loader','less-loader'], // 将 Less 文件编译为 CSS 文件 }, { test: /\.styl$/, //把loader:改为use: use: ['style-loader','css-loader','stylus-loader'], // 将 Less 文件编译为 CSS 文件 }, { test: /\.scss$/i, use: [ // 将 JS 字符串生成为 style 节点 'style-loader', // 将 CSS 转化成 CommonJS 模块 'css-loader', // 将 Sass 编译成 CSS // 'sass-loader', { loader:"sass-loader", options:{implementation:require('dart-sass')} } ], }, ], },};
这是我安装后上传在github的代码：github.com/lnn520/webp…
这是我安装的插件和版本：在安装webpack-dev-server时注意webpack和webpacl-cli的版本，否则会出错，但是不要怕,你可以在webpacka官网中找，进入github然后搜关于你的错误，基本上能找到答案，一定要有耐性。
"css-loader": "^5.0.0", "file-loader": "^6.2.0", "html-webpack-plugin": "^4.5.0", "less": "^3.12.2", "less-loader": "^7.0.2", "mini-css-extract-plugin": "^1.2.1", "style-loader": "^2.0.0", "stylus": "^0.54.8", "stylus-loader": "^4.1.1", "webpack": "^5.3.0", "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.0"
