从0-1建一个webpack/vue项目，熟悉一下webpack知识点

以下配置项部分优化来自于国内直连GPT/Claude

第一步

首先整个新文件夹，打开终端，然后创建一个新目录，或者直接在vscode里面建个新文件夹，并进入该目录；

mkdir my-vue-webpack-project

第二步 进入当前目录

cd my-vue-webpack-project

第三步 初始化npm项目

npm init -y

第五步 安装webpack

npm i -D webpack webpack-cli webpack-dev-server

安装完成之后我们需要配置webpack，在外层建一个build的文件夹，然后在build文件夹中建一个webpack.config.js

const path = require('path');
module.exports = {mode: 'development', // 开发模式entry: path.resolve(__dirname, '../src/main.js'), // 入口文件output: {filename: '[name].[hash:8].js', // [name] 指entry属性名字, 默认为mainpath: path.resolve(__dirname, '../dist'), // 打包后的目录，这里会自动创建dist文件夹clean: true, // 打包前清空输出目录，相当于clean-webpack-plugin插件的作用,webpack5新增。}
}

当前目录如下

第六步 安装html-webpack-plugin插件

对项目打包压缩之后，会有一个压缩的js文件，我们需要把这个js文件引入到我们的根入口文件index.html中，
html-webpack-plugin这个插件可以自动化完成这个操作

npm i -D html-webpack-plugin

基于以上6步，来个基本的打包示例
1.我们在外层再新建一个pubilc文件夹，在public文件夹里面建一个index.html,之后在webpack.config.js里面引入第六步安装的插件，并写在plugins数组里面，写完之后的webpack.config.js代码如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {mode: 'development', //开发环境entry: path.resolve(__dirname,'../src/main.js'),//入口文件output: {//输出文件path: path.resolve(__dirname,'../dist'),filename: '[name].[hash:8].js',//输出文件名clean: true, //每次打包前清空dist文件夹},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname,'../public/index.html'),//模板文件})],
}

2.需要在package.json里面加上build打包指令，注意在script对象里面加以下指令

"build": "webpack --config build/webpack.config.js"

3.完成上述内容，就可以在命令行执行npm run build来打包啦
打包成功后如下

完成以上示例进入拓展内容

第七步 安装css相关loader插件解析我们项目中的css

涉及到css我们需要安装一些常用的css处理插件，比如css，less等相关loader

npm i -D style-loader css-loader less less-loader

之后在webpack.config.js中配置rules

// webpack.config.jsmodule.exports = {//...省略其他配置module: {rules: [{// 用正则去匹配要用该 loader 转换的 CSS 文件test: /\.css$/,exclude: path.resolve(__dirname, 'node_modules'),use: ['style-loader', 'css-loader'] // 切记从右向左解析原则},{test: /.less$/,exclude: path.resolve(__dirname, 'node_modules'),use: ['style-loader', 'css-loader', 'less-loader'] // 从右向左解析原则   }]}
}

第八步 安装autoprefixer ，为css添加浏览器前缀

因为有些CSS属性只支持某个浏览器，或者因为某个属性前端还没形成统一的标准，所以需要在某些css属性上加上各个浏览器的前缀，比如-webkit/-moz等等

.box {-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;
}

先安装依赖：

npm i -D postcss-loader autoprefixer 

之后在webpack.config.js里面配置postcss-loader以及autoprefixer 插件即可

 module: {rules: [{test: /.less$/,exclude: path.resolve(__dirname, 'node_modules'),use: ['style-loader', 'css-loader',{loader: 'postcss-loader',options: {postcssOptions: {plugins: [require('autoprefixer')]}}},'less-loader'] // 从右向左解析原则   }]}

第九步 把css样式从js单独抽离出一个文件

安装插件

npm i -D mini-css-extract-plugin

添加插件相关配置【以下包括前面几个步骤的配置，这一步主要看MiniCssExtractPlugin 】

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {mode: 'development', //开发环境entry: path.resolve(__dirname,'../src/main.js'),//入口文件output: {//输出文件path: path.resolve(__dirname,'../dist'),filename: '[name].[hash:8].js',//输出文件名clean: true, //每次打包前清空dist文件夹},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname,'../public/index.html'),//模板文件}),new MiniCssExtractPlugin({filename: "[name].[hash:8].css",chunkFilename: "[id].css",})],module: {rules: [{// 用正则去匹配要用该 loader 转换的 CSS 文件test: /\.css$/,exclude: path.resolve(__dirname, 'node_modules'),use: [MiniCssExtractPlugin.loader,'css-loader'] // 切记从右向左解析原则},{test: /.less$/,exclude: path.resolve(__dirname, 'node_modules'),use: [MiniCssExtractPlugin.loader,'css-loader',{loader: 'postcss-loader',options: {postcssOptions: {plugins: [require('autoprefixer')]}}},,'less-loader'] // 从右向左解析原则   }]}
}

测试打包效果，在src下面新建一个index1.css文件和index2.less文件，并在main.js引入。

之后运行下```npm run build``，可以看到dist下的js和css。发现main.css整合了src下面两个css

第十步 babel转义js文件【比较重要】

首先安装一系列Babel库，babel-loader负责将ES6/7/8等语法转换为ES5语法 core-js负责将新的api进行转化，例如promise、Generator、Set、Maps、Proxy等

npm i -D babel-loader @babel/preset-env @babel/core @babel/plugin-proposal-decorators

npm i -D @babel/plugin-transform-arrow-functions @babel/plugin-transform-runtime

npm install @babel/plugin-proposal-class-properties --save-dev

上面基本是常用的一些webpack配置项；

我们还可以做一些其他配置，比如热更新

安装插件

npm i -D webpack-dev-server

然后把下面这个命令行放在package.json里面的script对象里面

"dev": "webpack serve --config build/webpack.config.js"

{"scripts": {"dev": "webpack serve --config build/webpack.config.js","test": "echo \"Error: no test specified\" && exit 1","build": "webpack --config build/webpack.config.js"},
}

然后就可以npm run dev运行啦

正常项目我们还要区分下dev环境和生产环境

新建两个文件夹

webpack.dev.js 开发环境使用
webpack.prod.js 生产环境使用
webpack.config.js 公用配置

安装webpack-merge插件库，来合并配置项

npm i -D webpack-merge

// webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.config.js')module.exports = merge(common, {mode: 'development',devServer:{port:3000}
});

// webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.config.js');module.exports = merge(common, {mode: 'production',
});

原先的webpack.config.js也需要做出修改，我们只需要删除mode和devserver字段
packpage.json修改

  "scripts": {"build": "webpack --config build/webpack.prod.js","dev": "webpack serve --config build/webpack.dev.js"},