将所有的打包资源配置进行整合:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//入口文件
entry: './src/index.js',
//输出文件
output: {
path: path.resolve(__dirname, 'build'),
filename: 'built.js'
},
//loader配置
module: {
rules: [
//打包css文件资源
{ //如果我们需要处理不同的文件,我们需要进行配置不同的loader,在数组中直接添加一个新的元素对象
test: /\.css$/,
use: [
//由下向上执行
'style-loader',
'css-loader'
]
},
//打包less文件资源
//如果包括less文件我们还需要配置打包编译less文件
{
test: /\.less/,
use: [
'style-loader',
'css-loader',
'less-loader' //同时我们还需要下载less-loader和less
]
},
//打包图片资源
{
test: /\.(png|jpg|gif)/,
//由于我们只需要一个loader,所以我们就可以直接写
loader: 'url-loader',
//所以我们需要进行下载url-loader和file-loader这两个包
options: {
//对图片进行优化
limit:8*1024,
esModule:flase //去除ES6模块化
}
},
//打包html文件中的图片资源
{
test: /\.html$/,
loader:html-loader
},
//打包其他资源
{
exclude: /\.(css|js|html|less|png|jpg|gif)/, //排除我们原来配置完的资源
loader: 'file-loader',
options: {
name;'[hash:10].[ext]' //由于我们打包完输出的文件名为一长串的哈希数,我们取前10位就好,[ext]代表保留原来的后缀
}
}
]
},
mode: 'development',
//进行html文件资源打包
plugins:[
new HtmlWebpackPlugin({template: './src/index.html'});
]
},
//开发环境配置:devServer
devServer:{
contentBase:path.resolve(__dirname,'build'), //打包输出路径
compress:true, //启动gaip压缩
port:3000, //设置端口号
open:true //自动打开浏览器
}
运行指令:
$ npx webpack-dev-server