[聚合文章] 从搭建vue-脚手架到掌握webpack配置（三.多页面构建）

  1. 首页
  2. 聚合文章
  3. 文章详情
JavaScript 1900-01-01 22 阅读
原文链接: https://www.jianshu.com/p/ff544834c478

前言

上一期中我们通过引入了插件实现了不少功能——样式抽离、公共模块提取、代码压缩等等；本期开始讲讲可能会用到的第三方编译器的配置和多入口的优化。

本期重点：postcss和.babelrc配置、多入口多页面代码提取优化

往期链接：

从搭建vue-脚手架到掌握webpack配置（一.基础配置）

从搭建vue-脚手架到掌握webpack配置（二.插件与提取)

小小题外话

本系列文章写到了第三篇，Jason我发现了这系列的文章有一个很大的缺陷，文章和前面的文章存在着耦合，可能会导致知识点存在线性的关联，对于有基础的朋友来说，又要从第一期开始阅读的话，比较不友好。
所以后面的文章开始Jason会尝试独立知识点，尽量回归知识点的运用上；在文章的开头也会说明本期的主要内容；当然一些插件和loader的进阶使用还是要有基础的，初学者还是建议从头过一遍。

使用postcss

postcss介绍

postcss官方的GitHub上还有中文的介绍。

PostCSS 是一个允许使用 JS 插件转换样式的工具。 这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins， 编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。

简单来说postcss就是一个css的转换器，有了postcss或许你就不用再用less和sass了，通过在postcss上添加插件可以组装出你需要的语法需求和功能（属性变量，父子嵌套，版本兼容等），在postcss上通常会用的插件有cssnext、Autoprefixer、postcss-import。甚至可以在postcss上用less或sass编译器

用法

这里就用添加Autoprefixer（自动兼容浏览器）为例简单讲讲postcss的配置方法，有几种配置方法

  • 使用配置文件配置 postcss.config.js或.postcssrc.js
  • 使用post-loader的时候通过options配置项配置

建议是使用配置文件进行配置，这样可以在所有调用到postcss-loader的地方使用同样的配置

！值得一提的是其实vue-loader是默认启用了postcss-loader的，所以vue-loader的官方文档里面有直接设置postcss配置项的选项。

所以在有vue-loader的项目里面其实是不用手动安装npm install -save-dev postcss-loader的，不是vue项目就装吧。

只要在css的loaders里面添加vue-style-loader，就会自动启用postcss了，如下

{    test:/\.less$/,    use:[        'vue-style-loader'，        'css-loader',        'less-loader'    ]    })},{    test:/\.vue$/,    loader:'vue-loader',    options:{        loaders:{            'css': [                'vue-style-loader'，                'css-loader',            ],            'less': [                'vue-style-loader'，                'css-loader',                'less-loader'            ]        },        //postcss:{}//vue-loader还自带了这一选项，但是建议用配置文件进行配置    }}

引入 Autoprefixer :

  • 需要安装 autoprefixer插件哦：npm install --save-dev autoprefixer
  • 新建.postcssrc.js文件在跟目录下，内容如下
module.exports = {  "plugins": {    //"postcss-import": {},    // to edit target browsers: use "browserslist" field in package.json    "autoprefixer": {}  }}

autoprefixer对应的对象{}，是该插件的配置项，有需要可以查阅文档进行配置；postcss-import插件是@import是可以引本地的文件，如node_modules内的文件，英文好的去看看该插件介绍。既然vue-cli用了postcss-import我们也这样用吧，记得安装npm install --save-dev postcss-import。

autoprefixer会去检查package.json里的browserslist 配置项作为兼容浏览器版本的范围

//在package.json上添加这一项"browserslist": [    "> 5%",    "last 2 versions",    "not ie <= 8"  ]

我们这里就简单的引入了autoprefixer，没有做过多的配置，如果对postcss感兴趣的话可以去看看下面文档

.babelrc配置

在使用es6语法编写js的时候，我们都会在webpack上用babel-loader转换js文件，而.bablrc就是babel编译js时用的的规则和插件的配置规范

像postcss一样在根目录下创建名为.babelrc的文件（没有.js后缀）

{  "presets": [    ["env", {       "modules": false ,       "targets": {        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]      }    }],    "stage-3"  ]}

安装依赖：

npm install --save-dev babel-presets-env babel-presets-stage-0

babel-preset-env,本依赖插件是设置编译环境的插件，如果直接引入不设置规则那实际它和引入babel-preset-latest一样，会囊括es2015、es2016、es2017。

'modules':false：设置模块引用规则，可以设置成"amd" | "umd" | "systemjs" | "commonjs" | false, defaults to "commonjs",设置了false，就是用es6以上默认的规则。

targets.browsers:设置兼容的浏览器范围

tage-3依赖，ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个

babel-presets-stage-0  babel-presets-stage-1babel-presets-stage-2  babel-presets-stage-3
其他

还可以在里面添加插件实现更多的功能，如添加react的jsx编译。像官方给出的示例代码一样

{  "presets"：["env"]  "plugins": ["transform-react-jsx"],  "ignore": [    "foo.js",    "bar/**/*.js"  ]}

毕竟这不是babelrc的教程，更高级的使用可以去以下的链接去深入学习。

链接

好了，整个个系列到目前为止常常会用到的webpack配置、loader、插件、编译器都使用过了。

后面开始就要按照需求，改进我们的自动化构建配置了。

多页面、多入口

很多用vue或者react工程环境都会默认是spa（单页应用），但是业界上也有很多项目倾向于使用vue等框架的组件化功能，但是并不引入router模块，而是使用传统的路由链接；尤其是视频网站、购物网站等pc端的网页是不会做成spa的。所以在一个工程中编辑和生成多个页面是必须的情况。

在src目录下新建home.js文件（内容和main.js一样就行），在webpack的entry项设置多个入口是最方便快捷的方法。

entry:{    app:'./src/main.js',    home:'./src/home.js'},output:{    path:path.resolve(__dirname,'./dist'),    filename:"js/[name].js",},

entry对应不同的页面设置不同的入口文件，output.filename要写成[name]以chunk名命名的形式

看似简单，但是我们之前用到公共代码提取（CommonsChunkPlugin）和css抽离（ExtractTextPlugin）会把整个项目中的代码打包到一起会影响页面的加载。所以我们要改进他的逻辑

css分页面拆分

这个很简单，只要在实例化ExtractTextPlugin插件的同时添加一个allchunks:true参数就可以了,还有就是把输出都指向一个css文件，用``[name]```区分chunk名

const ExtractVueCss = new ExtractTextPlugin({filename:'styles/[name]-style.css',allChunks:true});

按照我的习惯，先分出一份公共样式（root.css）,其他的按chunk的数量进行分割，所以root.css的allchunks:false，其他的true。

const path = require('path')const webpack = require('webpack')const ExtractTextPlugin = require("extract-text-webpack-plugin")const ExtractRootCss = new ExtractTextPlugin({filename:'styles/root.css',allChunks:false});const ExtractVueCss = new ExtractTextPlugin({filename:'styles/[name]-style.css',allChunks:true});module.exports = {    //other options...    module:{        rules:[        //...            {                test:/\.css$/,                //这里用的ExtractRootCss,输出到root.css                use:ExtractRootCss.extract({                    fallback:'style-loader',                    use:['css-loader']                })            },            {                test:/\.less$/,                //这里用的ExtractRootCss,输出到root.css                use:ExtractRootCss.extract({                    fallback:'style-loader',                    use:[                        'css-loader',                        'less-loader'                    ]                })            },            {                test:/\.vue$/,                loader:'vue-loader',                options:{                    loaders:{                        //这里用的ExtractVueCss                        'css': ExtractVueCss.extract({                            use: 'css-loader',                            fallback: 'vue-style-loader'                           }),                        //这里用的ExtractVueCss                        'less':                        ExtractVueCss.extract({                            use:[                                'css-loader',                                'less-loader'                            ],                            fallback:'vue-style-loader'                        })
                
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。