下期预报

到近来截至,整个工程得以说完全可用了。样式抽离,公共提取,压缩都用到了,相比一下vue init webpack-simple project-name营造的不难工程,会发觉大家比它的意义还完全,有未有好几成就感吧?

很可惜,没悟出讲插件用了那般长的篇幅,还是尚未涉嫌postcss和babel的计划,下一期起先简要提一下那几个,然后大家一而再优化塑造进程,让她能够适应多入口多页面包车型的士费用。想要驾驭今后的内容能够关切哦~~

!!!文章首发地址

说明
  • filename 生成的html的文书名,不填就默许是最初的文章件名
  • title title标签的剧情
  • template html模板地址,那里我们用自身上一期建在跟目录的index.html

那里有长辈对HtmlWebpackPlugin的详细说明文章

index.html的内容要改一改了,因为webpack打包完之后自动抬高财富地址到html文件里,所以大家要删掉原本写上去的script标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue demo</title>
</head>
<body>
    <div id="app">

    </div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
</body>
</html>

有人恐怕会奇怪,那里怎么加了三个cdn的jQuery,因为作者要在此间带过一个知识点:有时候大家会有用到cdn加速的库财富,然则不晓得怎么在工程中运用。

相当的粗略我们在html模板中一向引进,然后在webpack.config.js配置中加1项“外部引进”(externals)

// webpack.config.js
externals:{
    'jquery':'window.jQuery'
}
//app.vue中引入
import $ from 'jquery'

生成html模板

事先根目录下index.html要大家友好引进js财富地址,有新的财富都要手动引进,很麻烦,那时候就会用到HtmlWebpackPlugin
插件,根据index.html作为模板在dist目录下生成带上全部能源的html 文件。

npm install --save-dev html-webpack-plugin

先经过require引进插件,然后在输出对象里面添加plugins属性,数据值类型是数组,数组成员new [插件]()丰裕插件就行。每一种插件都有温馨的布置项和标准,能够查
npmjs 也许他们的官方文书档案

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

module.exports = {
    entry:{
        app:'./src/main.js'
    },
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:"js/[name].js",
    },
    module:{
        rules:[
        //...
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename:'index.html',
            title:'vue demo',
            template:'./index.html',
        })
    ],
    externals:{
        'jquery':'window.jQuery'
    }
}

运维创设试一下

好了到方今停止抢先百分之五十会用到的插件都引进到了webpack配置内部,构建一下试试。

总体webpack.config.js的代码在此间
https://pan.baidu.com/s/1jKnDSYa

npm run dev

jQuery,dev

npm run build

image

察觉uglifyJs报错,是因为大家从没配置babel的翻译器和编写翻译规则,篇幅有限babel的安排表明放到下一期。

化解办法:在根目录下开创文件.babelrc,内容如下

{
  "presets": [
    ["env", {
       "modules": false 
    }]
  ]
}

安装babel-preset-env,npm install --save-dev babel-preset-env

下一场再build,没难点了

image

包装后的目录结构如下

image

js代码压缩

css文件在
build(抽取和装载)的还要已经展开了总结的滑坡,所以上边主若是对js代码的滑坡,也正是隔三差五的UglifyJs(丑化js),webpack自带了UglifyJsPlugin插件,在plugins上启用就行。

new webpack.optimize.UglifyJsPlugin({
    sourceMap: true,//开启源码映射
    compress: {
        warnings: false//去到警告
    }
}),

只是上述的用法是webpack壹.0遗留下来的,用的旧版的UglifyJs,他的应用验证也在wepack一.0的文档里。你能够有手动安装uglifyjs-webpack-plugin,引进最新的UglifyJs

/* npm install -save-dev uglifyjs-webpack-plugin */

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

new UglifyJsPlugin({
  uglifyOptions: {
    compress: {
      warnings: false
    }
  },
  sourceMap: true
})

webpack三.0华语文书档案对该插件的表达
在这里

官方文书档案的介绍
在这里

-development用到的
  • 热插拔调节和测试
  • 生成html模板
热替换插件

热替换正是支付的进程中期维修改文件内容之后并非反复刷新页面,修改会自动同步到浏览器中,webpack内部已经有那份插件了,不用安装间接都用就能够。在plugins添加一项
new webpack.HotModuleReplacementPlugin()就ok了

plugins:[
        new HtmlWebpackPlugin({
            filename:'index.html',
            title:'vue demo',
            template:'./index.html',
        }),
        new webpack.HotModuleReplacementPlugin()
    ]

改一下npm scripts

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  }

运行 npm run dev,热陈设解决

以上是支付条件要用到的插件,上面就是变化环境用到的插件了

简简单单利用

在运用css相关loader在此以前先用本插件过滤三回

var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  // other options...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            css: ExtractTextPlugin.extract({
              use: 'css-loader',
              fallback: 'vue-style-loader' // <- 这是vue-loader的依赖
            }),
            //用了less或者sass的地方都要用上哦
            'less': ExtractTextPlugin.extract({
                use:[
                    'css-loader',
                    'less-loader'
                ],
                fallback:'vue-style-loader'
            })
          }
        }
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles/style.css")
  ]
}

vue内部的style供给先抽取出来,所以要在fallback属性上助长预先的加载器
‘vue-style-loader’,’vue-style-loader’是vue-loader自带的啊,假若运转时报错的话那就手动install一下他啊。

参考

web服务器

选择热替换此前当然要先有2个web服务器环境啦,安装webpack-dev-server

npm install --save-dev webpack-dev-server

webpack-dev-server其实是三个独立的插件,然则webpack内置了它的配备项,属性devServer相应的正是它的陈设项。

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

端口地址什么的都暗许
http://localhost:8080/
,就安装了跟财富目录地址contentBase。
想越来越深入的去安插能够看官方文书档案
dev-server。笔者还真没当真看过,嘻嘻。

集体代码提取

在多页面大概多入口的时候(entry设了不但三个),分裂的模块(chunks)会反复引进1样的财富模块(module,也正是import引进的js文件),还有vue等库的代码,以上那么些复用的代码最棒是能够独立出来,壹方面有利于缓存,1方面收缩包的体量。

CommonsChunkPlugin插件正是缓解这一难题的,它从属于webpack.optimize对象所以也是不用安装的。具体选择如下

new webpack.optimize.CommonsChunkPlugin({
    name: 'vender',
    minChunks:2
})

minChunks参数能够是number类型,填二正是说有二个chunk以上用到的公家块就会被打包的vender.js里面。minChunks也能够传三个措施,重回值是boolean类型.

(chunk能够大约精通为entry属性设置的输入而转变的整条关系树,所以到近年来停止本项目也唯有叁个chunk,正是’app’,当然插件生成的vender也是叁个chunk。对初学者的话就这样精通呢,用多了当然会有概念)

既是唯有多少个chunk
那就先抽取公用库中的代码吧,如vue包中的代码。把代码放到生产环境判断当中哦~

/*生成生产代码的时候才触发*/
if (process.env.NODE_ENV === 'production') {
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
            NODE_ENV: '"production"'
            }
        }),
        //抽取从node_modules引入的模块,如vue
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vender',
            minChunks:function(module,count){
                var sPath = module.resource;
                // console.log(sPath,count);
                //匹配 node_modules文件目录
                return sPath &&
                    /\.js$/.test(sPath) &&
                    sPath.indexOf(
                        path.join(__dirname, 'node_modules')
                    ) === 0
            }
        })
    ])
  }

那是中文文书档案上的介绍
commons-chunk-plugin

这是3个热心人计算的各个配置情状下打包的结果
https://segmentfault.com/a/1190000006808865

热替换

-production用到的
  • 生成html模板
  • css样式提取
  • 公家模块提取
  • JavaScript压缩
  • ……

引用官方的说法
,区分生产和支出环境有两种方法,如下图

image

第三种方法涉及到一次封装,就像官方vue-cli创设的门类同样,分成了多个布局文件,对当前的大家来说相比复杂,我们采取第二种格局,设置环境变量来差异陈设环境。

参考vue-cli生成的简易版工程(webpack-simple),大家发现npm
script写得稍微奇怪

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  }

在运作webpack命令此前运营了
cross-env NODE_ENV=develpomentproduction,那正是给环境变量赋值的进程,可是单纯那样写是力不从心实施的,大家供给安装二个插件——cross-env

npm install --save cross-env

那样大家就足以在随后运转在node环境的js
文件中做客到那一个环境变量,通过process.env目的还是可以得到package.json里面包车型地铁布置消息,那就涉及到node的知识了,不多说。

const env = process.env.NODE_ENV
//获取工程的版本号
const version = process.env.npm_package_version

粗略点写,把环境变量的判断直接放到webpack.config.js文件的最上面

const path = require('path')
const webpack = require('webpack')

module.exports = {
    entry:{
        app:'./src/main.js'
    },
    //...
}
/**
 * 生成生产代码的时候才触发
 */
if (process.env.NODE_ENV === 'production') {
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
        new webpack.DefinePlugin({
            'process.env': {
            NODE_ENV: '"production"'
            }
        }),
    ])
  }

假定以往额外的布置项越多以来,像上边那样写是不太好合并配置项的,到最终依然要抽离出另二个js文件装载新增或重写的安插项,用webpack-merge中间件合并配置对象。

webpack.DefinePlugin插件是安装全局常量的插件,要切记!赋值的时候记得写成'"production"',
官方对DefinePlugin插件
是那样说的

小心,因为那一个插件直接执行文书替换,给定的值必须带有字符串本人内的实际引号。平日,有两种艺术来完成那么些成效,使用
‘”production”‘, 或然选拔 JSON.stringify(‘production’)。

强迫症几句

想要深远摸底各种插件的切实可行用法,定制本人的要求必然要多点去参考文书档案和材质。为了方便我们本人早就在课程中每1个插件的上面给了多量的链接,能够说省去了大家百度的年月,突然感觉温馨好密切。

合法文档也不须要任何都看,用到怎么看怎么样,要哪些意义配置就重点看那有些就好,等到有时间再容易的过一次文书档案。

转移多文本

小编壹般的习惯是把外部引进的css文件认为是足以复用的,而vue内的style是各种页面都不等同的要其它生成的,所以作者建了两ExtractTextPlugin实例分别抽取样式到八个文本里。

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
                use:ExtractRootCss.extract({
                    fallback:'style-loader',
                    use:['css-loader']
                })
            },
            {
                test:/\.less$/,
                //这里用的ExtractRootCss
                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' // <- 这是vue-loader的依赖,所以如果使用npm3,则不需要显式安装
                          }),
                        //这里用的ExtractVueCss
                        'less':
                        ExtractVueCss.extract({
                            use:[
                                'css-loader',
                                'less-loader'
                            ],
                            fallback:'vue-style-loader'
                        })
                    },
                }
            },
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename:'index.html',
            title:'vue demo',
            template:'./index.html',
        }),
        ExtractRootCss,//填入插件实例,复用的css
        ExtractVueCss,//记得按顺序填入,vue内的css
        new webpack.HotModuleReplacementPlugin(),
    ]
}

那正是ExtractTextPlugin插件生成八个公文的艺术。你也足以服从本人的习惯去安顿。

webpack壹.0搬迁插件

loader-options-plugin 和此外插件分化。它的用处是辅助人们从 webpack 1搬迁至 webpack
二。官方认证

new webpack.LoaderOptionsPlugin({
    minimize: true
}),

别的插件

前言

上壹期从零营造了1个基础版的vue-cli项目,首要介绍了loader的设置和局地布置项的用法,还给项目添加了less预处理器

上一期的链接-从搭建vue-脚手架到控制webpack配置(壹.基础安插)

本期开首引进常用的插件落成支付条件和扭转环境会用到的局部成效,比如热插拔、css样式提取、公共模块提、取代码压缩等等

源码映射

因为重构和减弱后的代码不方便人民群众debug,所以大家先要开启source
map作用,在webpack配置内部添加一项devtool,如下

module.exports = {
    //entry: ...
    devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
}

eval-source-map是付出条件用的源码映射,source-map是生成环境用的源码映射

官方对
devtool的牵线在那边

阮一峰先生对 source
map

的介绍在那里

css文件和vue内样式提取

假若不领取css样式,全部的.css文件和vue内的style都会以style标签的方式被添加到页面包车型大巴head里面,不便利能源的缓存而且下跌了页面包车型地铁加载速度。

好的,就用extract-text-webpack-plugin插件吧,老规矩安装一下

npm install extract-text-webpack-plugin --save-dev

分别开发与生育环境

众多插件成效是在付出条件(development)用到的然则在s生产环境(production)用不到的,反之亦然。比如

相关文章

网站地图xml地图