从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"},
还有其他配置，有时间会继续更新，大家有问题可以评论，也可以 直接把你的代码交给GPT/Claude镜像站让AI帮你检查哪里错了