npm init
安装webpack相关包
npm install webpack webpack-dev-server webpack-cli -D
配置webpack
-
在根目录下新建
config
文件夹 -
在config文件夹下创建
webpack.dev.config.js
和webpack.prod.config.js
文件 -
修改
package.json
文件
// package.json
"scripts": {
"dev": "webpack serve --config config/webpack.dev.config.js",
"build": "webpack --config config/webpack.prod.config.js"
},
// webpack.dev.config.js
const path = require('path')
module.exports = {
mode: 'development', //模式
entry: './index.js', //入口
output: {
filename: '[name].[contentHash].bundle.js'
}
}
// webpack.prod.config.js
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: './index.js', //入口
mode: 'development', //模式
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].[contenthash].bundle.js'
},
}
线上环境 配置插件 clean-webpack-plugin
plugins:[
new CleanWebpackPlugin()
]
开发和线上环境 配置插件 html-webpack-plugin
- 安装插件
npm install html-webpack-plugin -D
- 根目录下新建public文件夹
- 在public文件夹下新建index.html文件
- webpack.config.js中配置该插件
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
title: '',
template: path.resolve(__dirname, '../public/index.html')
})
]
配置处理vue文件的vue-loader
- 安装相关loader
npm install vue-loader vue-template-compiler -D
- webpack.config.js中配置该loader
{
test: /\.vue$/,
loader: 'vue-loader',
}
- webpack.config.js中配置vue-loader对应的插件
const VueLoaderPlugin = require('vue-loader')
plugins: [
new VueLoaderPlugin(),
]
配置处理css文件的vue-style-loader、css-loader
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
配置处理js文件的babel-loader
1、 安装相关loadernpm install -D babel-loader @babel/core @babel/preset-env
2. 配置该loader
{
test: /\.js$/,
loader: 'babel-loader',
// 使用options给babel-loader传递选项
options: {
// babel预设,即预设里面整合了很多插件
presets: ['@babel/preset-env']
}
},
配置处理图片文件
*webpack5之后可使用“资源模块”来处理
{
test: /\.(png|jpe?g|gif|webp)$/,
type: 'asset/inline'
}
webpack5之前使用url-loader
- 安装相关loader
npm install url-loader -D
- 配置该loader
{
test: /\.(png|jpg|gif)$/,
exclude: /node_modules/,
use: [
{
loader: 'url-loader',
options: {
name: '[name].[ext]?[hash:8]',
outputPath: 'images/',
// esModule:false 解决通过require动态引入图片路径显示为`<img src="[object Module]">`问题
esModule:false
}
}
]
},
未完待续。。。