从入门到入土的Vue2+webpack

前言：本文只是根据自建的项目所做的文档，文中没有面面俱到，一些小配置并没有在上面写，在实际开发中可能会有写不可预估的出入，希望对各位看官有一定的参考价值

引子：目前社区比较知名的脚手架，有vue-cli、create-react-app,他们都解决了一站式的项目环境配置问题虽然。不过还有一些问题，它们没法解决，比如：1、vue-cli专注的vue项目的环境搭建和配置问题、那每个公司的业务类型不一样，有些公司是金融业务，有些公司是物流业务，如何把相关的东西集成进来？2、每一个公司在项目的沉淀中都是不一样的，比如组件的沉淀、监控埋点方案的沉淀、以及其他样式、目录、service等等一系列编码相关的沉淀，用什么样的方式，能够避免我们的重复劳动？ vue-cli 已经非常成熟，成熟到可能自己写的 webpack 性能上不一定比得上vue-cli。当然只是性能上。在实用性，拓展性，可玩性却有很大的操作空间，vue-cli是把饭喂到嘴边，但是并不知道这个饭是如何做的，只见其名不知其意，相比于自己搭建一套环境，你可以知道各个版本的差异化，哪些配置已经废除或者有更好的替代品，不同版本间的环境依赖如何做兼容,哪些方式是最佳实践，对基础业务有更深的理解

关于项目根文件下package.json中的devDependencies–save-d和dependencies–save常见认知：devDependencies用于本地环境开发。dependencies用于生产环境。通过NODE_ENV=developement或NODE_ENV=production指定开发或生产环境。更多参考

关于全局变量process.env.NODE_ENV，在webpack5中可以使用new webpack.DefinePlugin({})来定义一个或者多个不同的全局变量(不是windows),里面的值需要JSON.stringify包一层。优先级DefinePlugin > --mode（package.json） > mode(webpack.dev或者webpack.prod中定义的)。更多请戳关于环境变量中的命名规则可以借鉴模式与环境变量 1.初始化：npm init (或者使用默认执行的命令npm init -y) 根目录创建build——webpack.dev.js,webpack.pord.js,webpack.base.js 根目录创建index.html,也可以在public下创建 根目录创建src——App.vue,main.js

2.安装webpack: npm i webpack webpack-cli -D (这里默认是最新版本，如果想使用旧版本的话可以用npm i --save-dev webpack@<version>。不建议全局安装，会将项目中的webpack锁定到指定版本，在使用不同版本的项目中可能会导致构建失败。关于为什么要单独安装webpack-cli——已经从webpack4后版本剥离)

3.安装vue及相关loader: npm i vue@2 -S,npm i vue-loader -D(解析和转换vue文件,交给对应的loader处理),npm i vue-template-compiler -D(编译vue模板的包，传入模板返回AST抽象语法树。vue3替代为@vue/compiler-sfc)

4.样式相关：npm install -D style-loader css-loader postcss-loader autoprefixer sass-loader sass-resources-loader npm install --save postcss npm install less less-loader --save (采用sass与less可供选择。style-loader与vue-style-loader之间推荐使用后者)

5.html相关：npm i html-webpack-plugin -D（在打包结束后，自动生成一个html文件，并把打包生成的js文件引入到这个html文件当中）

6.webpack相关配置：npm install webpack-dev-server -D(对代码进行热重载)。npm install -D cross-env(兼容不同平台)。npm i clean-webpack-plugin -D(在打包之前清空output配置的文件夹)

7.文件类配置：npm install file-loader url-loader -D

{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,type: 'asset',parser: {dataUrlCondition: {maxSize: 10 * 1024, // 默认是 8kb},},generator: {filename: 'static/images/[name][hash:5][ext]',},exclude: /node_modules/,},{test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,type: 'asset/resource', // 类似 file-loader 导出文件generator: {filename: 'static/media/[name][hash:5][ext]',},exclude: /node_modules/,},// 字体文件{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,type: 'asset/resource',generator: {filename: 'static/font/[name][hash:5][ext]',},exclude: /node_modules/,} 

8.配置文件哈希值：webpack 提供了三种 hash 方式，分别是 hash，chunkhash，contenthash。

①hash 是项目工程