配置web pack
module:{ rules:[ // 配置的是用来解析.css文件的loader，css-loader、style-loader // css-loader -- 解析css文件 // style-loader -- 将解析出来的结果 放到html中 使其生效 { test:/\.css$/, use:['style-loader', 'css-loader'] // webpack底层调用这些loader的顺序是从右向左 } ] } 2.5 处理less和scss
安装
npm i -D less less-loader sass-loader node-sass
配置less
{ test:/\.less$/, use:['style-loader', 'css-loader', 'less-loader'] }
配置sass
{ test:/\.scss$/, use:['style-loader', 'css-loader', 'sass-loader'] } 2.6处理图片和字体
下载、url-loader 封装了 file-loader
npm i -D file-loader url-loader
配置
配置 filte-loader
{ // 处理图片 test: /\.(png|jpg|gif)$/, use: 'file-loader' }, { // 处理字体图标文件 test: /\.(woff|woff2|eot|svg|ttf)$/, use: 'file-loader' },配置url-loader
{ test:/\.(png|jpg|gif)$/, use:{ loader: 'url-loader', options: { // limit 表示若图片的大于5KB、就以路径的形式展示、小于的话就用base64格式展示 limit: 5 * 1024, outputPath:'images', // 图片生成的文件夹名称 name:'[name]-[hash:6].[ext]' // 生成的图片名称 } } //use 也可以写成数组 use:[{ loader:'url-loader', options:{ limit: 12 * 1024 } }] } 2.7 babel
安装
npm i -D babel-loader @babel/core @babel/preset-env
如果需要支持更高级别的es6语法、可以继续安装插件、在官网找对应的插件安装
npm i -D @babel/plugin-proposal-class-properties
配置
{ test: /\.js$/, use: { loader: 'babel-loader', options: { presets: ['@babel/env'], plugins: ['@babel/plugin-proposal-class-properties'] } }, exclude: /node_modules/, include: path.resolve(__dirname, '../src') }官方更加建议使用 .babelrc 配置
{ "presets": ["@babel/env"], "plugins": ["@babel/plugin-proposal-class-properties"] }3.1 如果需要使用 genetator，无法直接使用 babel 进行转换，因为会将 generator 转换为一个 regeneratorRuntime， 然后使用 mark 和 wrap 来实现 generator
安装插件
npm i -D @babel/plugin-transform-runtime npm i -S @babel/runtime
配置中、修改 plugins
plugins: [ '@babel/plugin-proposal-class-properties', '@babel/plugin-transform-runtime' ]3.2 如果需要使用 ES6/7 中对象原型提供的新方法，babel 默认情况无法转换，即使用了 plugin-transform-runtime 的插件也不支持转换原型上的方法，需要使用 polyfill
安装
npm i -S @babel/polyfill
在需要使用该模块的地方直接引入
import '@babel/polyfill' 2.8 插件 2.8.1 clean-webpack-plugin该插件可以用于自动清除dist目录后重新生成，在 npm run build 的时候非常有用
安装插件
npm i -D clean-webpack-plugin
引入插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
配置插件
plugins:[ new HtmlWebpackPlugin({ filename: 'index.html', template: './src/index.html' }), new CleanWebpackPlugin() ], 2.8.2 copy-webpack-plugin
安装
npm i -D copy-webpack-plugin
引入插件
const CopyPlugin = require('copy-webpack-plugin');
配置插件
from:源、从哪里拷贝，可以是绝对路径或者绝对路径，推荐绝对路径
to:目标、拷贝到哪里去，相对于output的路径，同样可以是相对路径或者绝对路径，更推荐相对路径、直接相对于dist目录即可
plugins:[ new HtmlWebpackPlugin({ filename: 'index.html', template: './src/index.html' }), new CleanWebpackPlugin(), new CopyPlugin([ { from: path.join(__dirname, 'static'), to: 'static' } ]) ], 2.8.3 BannerPlugin是一个webpack内置插件、用于给打包的js文件加上版权注释信息
引入webpack插件
const webpack = require('webpack')
配置
plugins:[ new HtmlWebpackPlugin({ filename: 'index.html', template: './src/index.html' }), new CleanWebpackPlugin(), new CopyPlugin([ { from: path.join(__dirname, 'static'), to: 'static' } ]), new webpack.BannerPlugin('王耀的版权信息') ],