一直以来就只会单纯的使用
vue的脚手架，很少话时间去研究下关于vue脚手架中的webpack是如何配置，如何实现最后的打包。于是就抽了个时间，了解下webpack的一些基础的配置，为接下来的SSR学习做铺垫。项目已经传到github上，有兴趣可以下载下来参考，在目录下的simple文件夹。
package.json的主要配置
package.json中的scripts对象。
-
该对象主要是写了一些npm run 中执行的快捷方式。举个栗子比如这一行代码：
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js" -
先是定义了一个
NODE_ENV变量为development。这样我们在代码中就可以通过process.env.NODE_ENV来访问到这个变量名。从而来区分开发环境和编译环境。 -
cross-env如果不加，也是可以运行，由于window,Linux等操作系统设置全局的变量名的方式是不一样，为了不做那么多区分，我们可以安装一个插件来方便我们设置全局变量名。 -
webpack-dev-server是webpack中一个比较重要的组件，为什么我们在使用vue的开发中，可以使用localhost:8080亦或者本地地址加端口来访问页面，就因为有了这个组件帮我们启动了一个本地的开发环境的服务，从而使得我们更加方便的去调试页面，代码。 -
webpack.config.js这个就是主要的webpack配置文件，我们可以在开发或者是编译不同的环境，来执行不同的js文件，一般dev和build都会区分出两个文件。这边为了方便，都写到了一个文件里面，方便区分。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
}
dependencies和devDependencies的区别
-
我们在开发中会加入很多不同的插件，组件来方便我们去快速开发或者调试代码。 由于
webpack已经升级到了4.0的版本，很多相应的插件的最新版也都已经需要4.0来支持，我们如果仍然是在3.0下做开发，需要制定版本号。 -
指定版本：比如
"vue-router": "2.2.5"表示安装2.2.5的版本 -
波浪号~+指定版本：比如
"vue-router": "~1.1.0"表示安装1.1.x的最新版本（不低于1.1.0），但是不安装1.2.x，也就是说安装时不改变大版本号和次要版本号 -
^+指定版本：比如
"vue-router": "^3.1.4"表示安装3.1.4及以上的版本，但是不安装4.0.0，也就是说安装时不改变大版本号。 -
dependencies就是项目启动的时候所需要依赖的，比如网络请求axios，时间格式化moment，全局状态管理vuex，路由的管理vue-router等等，这些都需要配置到dependencies。可以理解项目编译中会用到的东西。 -
devDependencies是项目中帮我们打包，或者帮助我们调试的组件。比如说代码的格式化，babel的配置，vue的loader，css的loader等等
webpack.config.js的配置
本人将开发环境和编译环境都写到了配置里面。方便对比，主要讲解下几个比较重要的配置。
项目入口文件的配置
项目入口文件
entry: path.join(__dirname, 'src/index.js')，需要配置一个项目的入口文件，就是项目启动起来需要去执行的方法。我配了如下的index.js的入口文件。大致意思就是创建一个div，将vue渲染出来的html节点加入到该div底下。其实vue也只是有自己的语法，将html模块化，实际我们在运行的时候，会发现我们创建的vue文件其实都会最终转化成html的dom节点。
import Vue from 'vue'
import App from './app.vue'
import '../src/assets/css/common.scss';
const root = document.createElement('div')
document.body.appendChild(root)
new Vue({
render: (h) => h(App)
}).$mount(root);
项目出口文件的配置
项目出口文件，也就是
build编译后的项目目录。指定文件名加入hash的字符串，所以我们如果项目中有改动，build出来的文件都是不一样。我们在项目中经常会发现，vue修改后，build的项目上正式环境后，并不需要刷CDN。
output: {
// 开发环境下可以用hash 正式环境不能用
filename: 'bundle.[hash:8].js',
path: path.join(__dirname, 'dist')
}
module的配置
module底下有一个rules，就是模块的规则。这个我们在使用vue的脚手架的时候，会比较经常接触，因为我们可能需要引入某些loader，比如项目中用了sass，那就需要sass的loader来支持，不然vue是识别不了sass的这种样式语法。具体的配置，每个插件的官网上都有很详细的配置教程，这里就不多描述。
{
test: /\.vue$/,
loader: 'vue-loader'
}
上面是一个很常见的
vue-loader的配置，test用正则指定所有的.vue文件，都用vue-loader来加载。这样就能实现将vue文件最终转成dom节点。
plugins的配置
我们在开发中会需要很多模块插件来方便我们做开发和调试，比如热更新。在
build中我们需要对文件进行压缩，重命名，或者其他更复杂的逻辑，那么我们需要依赖一些插件来帮我们实现，大部分的插件的设置和配置都是在plugins底下。
config.plugins.push(
// 配置hot需要的组件。
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
总结：
webpack是一个非常非常流行和实用的一个打包工具，而我们开发中却经常会忽略它的重要性。webpack的官网上的文档更加详细。个人理解它就是可以引用很多很多大神的插件组件，更快更高效的实现我们开发调试中的问题，让我们代码更规范和整洁。同时打包的时候帮我们压缩整理文件。
网友评论