webpack 安装一些常用的Loader

首先你需要安装一个webpack 安装命令 npm i webpack --save-dev，webpack是一个模块化打包工具

1,css-loader npm install --save-dev css-loader style-loader 需引入css样式 配置
module.exports = {
module: {
rules: [
{
test: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 56: …oader' ] }̲ ] } } 2,…/,
use: [{
loader: “style-loader” // creates style nodes from JS strings
}, {
loader: “css-loader” // translates CSS into CommonJS
}, {
loader: “less-loader” // compiles Less to CSS
}]
}]
}
};
3,url-loader npm install --save-dev url-loader 配置
module.exports = {
module: {
rules: [
{
test: /.(png|jpg|gif)$/,
use: [
{
loader: ‘url-loader’,
options: {
limit: 8192
}
}
]
}
]
}
}
4，uglifyjs-webpack-plugin 打包js文件 npm install uglifyjs-webpack-plugin --save-dev配置
const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin’);
module.exports = {
plugins: [
new UglifyJsPlugin()
]
}
5,HtmlWebpackPlugin 把HTML打包到./dist文件夹中 安装：npm install --save-dev html-webpack-plugin --save-dev 配置
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
module.exports = {
plugins: [
new UglifyJsPlugin()，
new HtmlWebpackPlugin ()
]
}
6,BannerPlugin 向文件中添加版权信息（一般不需要，因为我们版权意识比较薄弱，很多都是开源的）
1、这个是webpack内部的插件，首先在webpack.config.js中先引入：

var webpack = require(‘webpack’);
2、webpack.config.js配置
plugins: [
new webpack.BannerPlugin(’@2020-2020 wxy’), // 字符串就是版权声明
]