写vue大概快写了两年了,从开始的element后台项目,到纯h5的移动端项目,但是一直没有总结过。然后最近想总结下,因为之前项目比较旧,用的一直是vue-cli@2.0版本的,最近看官网发现已经升级到vue-cli3.0了,刚好顺便对3.0做个学习以及总结。
webpack总结
其实webpack首先要明白它是用node写的,所以node的基础是要具备一些的,包括node的一些,还有一些基本的语法。因为之前没接触过这一块就直接写vue了,然后到后面配置webpack头都大了。除了node以外还以为了解一些基础的es6的知识,例如import,promise,async等等。。
a.模块的引入/导出
node的引入方式是CMD所以引入使用的是require('')而导出则是exports或module.exports。说到require就会让人想起import,两者的区别:
require引入遵循CMD方式,import则是es6的引入方式。require是浅拷贝过程,import是解构过程。require是在运行时调用,可放在代码任何位置。import是编译时调用,必须放在文件开头。
b.webpack的配置文件
webpack.config.js为webpack的配置文件,里面最基础的东西有:
module.exports={ mode: 'development', // 有development/production 两个参数 entry: { //如何文件 index: './src/index', news: './src/news' }, output: { //输出文件 path: path.resolve(__dirname, 'dest'), filename: '[name].js' }};复制代码 1.其中mode一般有三种情况:
none:不配置development:用于配置开发环境production:生产环境
2.entry则是入口参数,就是要打包的入口文件,如果入口文件多,输入文件则会多。
3.output输出文件,用来输出编译后的文件路径以及名称。
c.loader的用法
loader的作用是解决webpack不能识别js以外文件的问题,比方说.vue .scss .css 等等。要让webpack能编译这些文件,就需要使用loader去解决。
module: { rules: [ { test: /\.scss$/, loaders: ["style", "css", "sass"] }, ] },复制代码 从上面的例子可以看出,loader有两个属性:
test:用于标识出应该被对应的 loader 进行转换的某个或某些文件。loaders:表示进行转换时，应该使用哪个 loader。options:表示配置详细参数,例如图片大小等.. 常用的loader有: 等.
dev-sever
用来搭建本地服务环境。(省略)
plugins
插件的目的就是为了解决loader实现不了的问题,最长用的插件就是HtmlWebpackPlugin,这部分也省略。
vue-cli3.0 项目配置
vue-cli3的项目结构,可以发现这个和 vue-cli2的区别还是挺大的。主要体现在 vue-cli2中包含了webpack的配置文件,但是 vue-cli3中却没有。vue-cli3是开放了webpack的配置,但是需要在根目录上创建 vue.config.js文件。 a.chainWebpack
其实chainWebpack之所以可以修改webpack的配置,主要是因为vue-cli3.0的内部配置是根据维护的,提供了原始数据的抽象层,让它可以配置具名loader和具名插件。让我们来看看使用chainWebpack和普通的配置webpack的区别:
// vue.config.js module.exports = { chainWebpack: config => { config.module .rule('vue') .use('vue-loader') .loader('vue-loader') .tap(options => { // 修改它的选项... return options }) }}// webpack.config.jsmodule: { rules: [ { test: /\.vue$/, use:[{ loader: 'vue-loader', options: vueLoaderConfig }] }, ] }复制代码 从上面可以看出,两者其实没啥区别,前者是链式操作。详细的信息可以。
b.devServer
devServer主要是用来修改本地服务器。
devServer{ open:true, proxy:{},//配置代理 port:8080, host:'localhost', https: false, // 使用https提供服务}复制代码 c.configureWebpack
configureWebpack如果是一个对象则会合并到最终的webpack的配置中ex:
module.exports = { configureWebpack: { plugins: [ new MyAwesomeWebpackPlugin() ] }}复制代码 如果需要判断是生产环境或者开发环境则可以将configureWebpack设置为一个方法.ex:
// vue.config.jsmodule.exports = { configureWebpack: config => { if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置... } else { // 为开发环境修改配置... } }}复制代码 d.完善部分配置
当我们正式搭建好vue-cli3.0时,会发现啥都不干,只是单纯的打包总体积都有120多k。而且这还是我们没有引入任何UI库的情况,这肯定是我们不能允许的,那么要如何解决这个问题?
可以使用webpack-bundle-analyzer 这个插件,这个插件主要可以分析我们打包后文件的体积,只有我们懂得各个文件的体积大小才能很好的压缩我们打包后的体积。使用方法:
//npm i webpack-bundle-analyzer 安装这个插件const BundleAnalyzerPlugin = require("webpack-bundle-analyzer") .BundleAnalyzerPlugin;//引入该插件configureWebpack: config => { if (isPro) { return { plugins: [ // 使用包分析工具 new BundleAnalyzerPlugin({ analyzerHost: "127.0.0.1", analyzerPort: 9006 // 运行后的端口号 }) ], externals: { vue: "Vue", vuex: "Vuex", "vue-router": "VueRouter" } }; } else { console.log("dev"); }}复制代码 这样简单的使用,执行命令npm run build后就会出现一个网页,上面会显示你的打包后文件的信息。具体的BundleAnalyzerPlugin配置项可以。
然后优化打包体积,目前来说我觉得最快捷,最懒的办法就是用cdn和gzip。所以在configureWebpack中添加这么一段代码,用处主要是在打包过程不会打包这些文件:
externals: { vue: "Vue", vuex: "Vuex", "vue-router": "VueRouter"}复制代码 这里我选了三个常用的库,然后就要为这三个库添加cdn了。最简单的方法就是在index.html文件中插入cdn。这样简单是简单了,但是坏处就是没法区分环境,最好的办法还是在打包的时候webpack自动为我们添加到html上就好了,只要在vue.config.js中添加
//vue.config.js 配置自己的cdnconst cdn = { js: [ "https://cdn.bootcss.com/vue/2.5.9/vue.min.js", "https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js", "https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js" ]};chainWebpack: config => { if (isPro) { //判断是什么环境 config.plugin("html").tap(args => { args[0].cdn = cdn; return args; }); } config.resolve.alias.set("@", resolve("src"));},//在index.html<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %><% } %>复制代码 就这样打包的时候就会自动为我们加上cdn了。