作者：Idi-amin_643 | 来源：互联网 | 2023-09-01 19:33
webpack的核心就是它的配置文件，只要配置好配置文件webpack就可以用得利索～～而配置文件主要就是7个部分entry、output、plugins、resolve、devs
webpack的核心就是它的配置文件，只要配置好配置文件webpack就可以用得利索～～
而配置文件主要就是7个部分entry、output、plugins、resolve、devserver（webpack3.6热更新）、devtool(调试工具)、我们今天要讲的module:rules(或者loaders)
我们今天要讲的loader也是在webpack.config.js里面配置的：
//webpack.config.js
const path = require('path');
const htmlPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output:{
path: path.resolve(__dirname,'./dist'),
filename: '[name].bundle.js'
},
resolve: {
extensions: ['', '.js', '.vue'] //这里是import的时候不带后缀，webpack帮我们自动查看的后缀列表
},
plugins:[
new htmlPlugin({
template : './index.html',
filename: 'index.html'
})
],
module:{
rules:[
{
test: /\.js$/,
loader: 'babel-loader',
query:{presets:['latest']},
exclude: path.resolve(__dirname,'./node_modules')
},{
test: /\.css$/,
loader: 'style-loader!css-loader',
},{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader',
},{
test: /\.html$/,
loader: 'html-loader',
},{
test: /\.(jpg|png|gif|svg)$/i,
use: ['url-loader?limit=500&name=images/[name]-[hash:5].[ext]','image-webpack-loader'],
}
]
}
}
webpack的use可以换成loader或者loaders，loader传字符串，loaders传数组，use和loaders一样
babel-loader需要按官网上面说的一样,安装3个东西（2个时编译器，一个是预设）：
npm i babel-loader babel-core babel-preset-latest -D
style-loader是把解析好的css文件以的方式插入网页
css-loader是解析css文件
npm i css-loader style-loader -D
sass-loader处理sass
npm i node-sass sass-loader -D
html-loader处理html
image-wepack-loader 压缩图片
url-loader 图片转base64，传参limit,小于limit kb时转base64,否则传给file-loader
file-loader 直接打包图片，必须安装这个～～
总结：
css代码import入js文件就行了，而html必须最后要在app的dom渲染到
京公网安备 11010802041100号