新建一个目录，初始化npm
npm init
此时会需要填入一些项目的基本描述
webpack是运行在node环境中的,我们需要安装以下两个npm包
npm i -D webpack webpack-cli
生成node_modules文件夹
新建一个src文件夹，里面新建一个main.js文件
console.log('测试webpack');
修改webpack配置，package.json
执行
npm run build
此时就会自动新建一个dist文件夹，里面会有main.js文件，就表示已经打包完成
新建一个build文件夹,里面新建一个webpack.config.js
// webpack.config.js
const path = require('path');
module.exports = {
mode:'development', // 开发模式
entry: path.resolve(__dirname,'../src/main.js'), // 入口文件
output: {
filename: 'output.js', // 打包后的文件名称
path: path.resolve(__dirname,'../dist') // 打包后的目录
}
}
此时npm run build，会在dist文件夹下，生成一个output.js文件夹
技术文件打包好，但是我们的html文件不能每次打包都重新手动引入js文件
（我们在实际开发中，打包生成的output文件，是不同名称的，避免出现缓存问题）
因此我们需要一个插件来帮我们完成手动修改html引入js的文件名这件事情（html-webpack-plugin）
npm i -D html-webpack-plugin
新建一个build同级的文件夹public,里面新建一个index.html
可以发现打包生成的js文件已经被自动引入html文件中
生成多个html-webpack-plugin实例来解决这个问题
此时dits下就又main和header两个打包后的入口文件
每次执行npm run build 会发现dist文件夹里会残留上次打包的文件，这里我们推荐一个plugin来帮我们在打包输出前清空文件夹clean-webpack-plugin
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
// ...省略其他配置
plugins:[new CleanWebpackPlugin()]
}
需要一些loader来解析我们的css文件
npm i -D style-loader css-loader
npm i -D less less-loader
// webpack.config.js
module.exports = {
// ...省略其他配置
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader'] // 从右向左解析原则
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader'] // 从右向左解析原则
}
]
}
}
npm i -D postcss-loader autoprefixer
// webpack.config.js
module.exports = {
module:{
rules:[
{
test:/\.less$/,
use:[
'style-loader',
'css-loader',
'postcss-loader',
'less-loader'
] // 从右向左解析原则
}
]
}
}
接下来，我们还需要引入autoprefixer使其生效
1，在项目根目录下创建一个postcss.config.js文件，配置如下：
module.exports = {
plugins: [require('autoprefixer')] // 引用该插件即可了
}
复制代码2，直接在webpack.config.js里配置
// webpack.config.js
module.exports = {
//...省略其他配置
module:{
rules:[{
test:/\.less$/,
use:['style-loader','css-loader',{
loader:'postcss-loader',
options:{
plugins:[require('autoprefixer')]
}
},'less-loader'] // 从右向左解析原则
}]
}
}npm i -D mini-css-extract-plugin
webpack 4.0以前，我们通过
extract-text-webpack-plugin插件，把css样式从js文件中提取到单独的css文件中。webpack4.0以后，官方推荐使用mini-css-extract-plugin插件来打包css文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
//...省略其他配置
module: {
rules: [
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
],
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].[hash].css",
chunkFilename: "[id].css",
})
]
}
file-loader就是将文件在进行一些处理后（主要是处理文件名和路径、解析文件url），并将文件移动到输出的目录中url-loader 一般与file-loader搭配使用，功能与 file-loader 类似
// webpack.config.js
module.exports = {
// 省略其它配置 ...
module: {
rules: [
// ...
{
test: /\.(jpe?g|png|gif)$/i, //图片文件
use: [
{
loader: 'url-loader',
options: {
limit: 10240,
fallback: {
loader: 'file-loader',
options: {
name: 'img/[name].[hash:8].[ext]'
}
}
}
}
]
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, //媒体文件
use: [
{
loader: 'url-loader',
options: {
limit: 10240,
fallback: {
loader: 'file-loader',
options: {
name: 'media/[name].[hash:8].[ext]'
}
}
}
}
]
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, // 字体
use: [
{
loader: 'url-loader',
options: {
limit: 10240,
fallback: {
loader: 'file-loader',
options: {
name: 'fonts/[name].[hash:8].[ext]'
}
}
}
}
]
},
]
}
}
为了使我们的js代码兼容更多的环境我们需要安装依赖
npm i -D babel-loader @babel/preset-env @babel/core
1、解析vue文件
npm i -D vue-loader vue-template-compiler vue-style-loader //
vue-loader用于解析.vue文件
npm i -S vue // 用于编译模板
const vueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module:{
rules:[{
test:/\.vue$/,
use:['vue-loader']
},]
},
resolve:{
alias:{
'vue$':'vue/dist/vue.runtime.esm.js',
' @':path.resolve(__dirname,'../src')
},
extensions:['*','.js','.json','.vue']
},
plugins:[
new vueLoaderPlugin()
]
}
2、热更新
npm i -D webpack-dev-server
还有一些优化webpack配置，如下
https://juejin.cn/post/6844904031240863758#heading-34