webpack2-update之路

引言

这里是webpack official提供的一到二的升级指南,二兼容一的写法,给个人感受是二的写法更规范,使用起来也比较简洁。

重要特性枚举

特性1

webpack2增长了对es6特性的支持。支持import和export写法。以前须要经过babel来弄这个。

重要特性tree-shaking(另外一个就是rollup),基于es6静态模块分析(仅支持标准写法)。大体原理就是经过分析js的AST,依赖检查等步骤,创建一个'对象依赖树',从而将被使用和被引用的的
对象抽出,合成最小可用程序集。

export function A() {

}
export function B() {

}
export default {
    'A':A,
    'B':B,
}

上面是反模式写法,至关于export default是把后面变量先赋值给default在输出,输出的是对象,无法利用ES6模块系统的多输入多输出特性。

正规写法,分别输出。这样以后总体import只能经过import * as XXX的方式。

// export {
//     'A':A,
//     'B':B,
// }

作了个demo (case1),实验结果以下,效果仍是比较明显的。

说一下应用场景,因为有些第三方库,是编译好的commonjs格式,虽然能够模块化引入加载,可是无法tree-shaking,除非你有未编译的es6 source。
另外在使用过程当中,babel 默认是将import和export转为require,因此须要关闭预设功能。

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

另外我想说的在作这个demo工程中,发现开启tree-shaking后会标记无用代码,可是不会删除,要作到真正的DCE,还须要进行Uglify处理。

第二个应用场景就是有利于组件化开发,下面这个截图中是平时使用到的vue component,每一个component集成了html、js、css。能够做为单独组件存在,
这些组件既具备重用性,同时也能够利用es6的模块化机制结合webpack2,实现组件之间的依赖。这样作的目的就是为了项目工程化,实现大项目的分工协做,提升开发效率。

特性2

loaders更名为rules,且写loader时不能缺乏后缀, 针对loader增长option参数。提倡这样作。

options: {
                cacheDirectory: true,
                presets: [
                    ['es2015', {modules: false}] 
                ]
            }

旧版loader链接器写法

loader: "style-loader!css-loader!less-loader"。

下面是我项目中的写法,以前还遇到个坑,最后那一项拆开了就error了,这种写法没条理性,不易阅读,不推荐。

{ test: /\.styl$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!stylus-loader") }

新webpack2链接器写法,很是好,简介明了。

use: [
"style-loader",
"css-loader",
"less-loader"
]

特性3

resolve.extensions配置项将再也不要求强制转入一个空字符串,下面是我使用的配置。

resolve: {
        extensions: ['.js', '.css','.sass', '.scss', '.less',  '.vue'],
    },

原先的话第一个为空,如今被移动到resolve.enforceExtension。

特性4

json-loader在2中已经内置,读取json文件不用加loader。
取消module.preLoaders,具体用法以下所示

preLoaders: [{
         test: /\.js$/,
         loader: "eslint-loader",//webpack1写法
         exclude: /node_modules/
         }]
-------------------------------------------------         
        rules: [{
            test: /\.js$/,
            loader: "eslint-loader",
            exclude: /node_modules/,
            enforce: 'pre' //webpack2写法
        }

特性5

1系列的ExtractTextPlugin不兼容wp2,需单独安装ExtractTextPlugin的v2版本

module: {
  rules: [
    {
      test: /.css$/,
-      loader: ExtractTextPlugin.extract("style-loader", "css-loader", { publicPath: "/dist" })
+      use: ExtractTextPlugin.extract({
+        fallback: "style-loader",
+        use: "css-loader",
+        publicPath: "/dist"
+      })
    }
  ]
}
--------------------------------------------------------------------------------------------------
plugins: [
-  new ExtractTextPlugin("bundle.css", { allChunks: true, disable: false })
+  new ExtractTextPlugin({
+    filename: "bundle.css",
+    disable: false,
+    allChunks: true
+  })
]

tips

在写这个的过程当中写了个脚手架基于webpack2,本身之后项目开发打算就基于这个,还须要完善。

在写这个过程当中遇到几个问题:

1. http://yeoman.io/generators/ 显示不出来，说是one hour synchronize但是超过了一个小时仍是没看到。
   在此的建议就是直接install yo一下试试看能不能用，不要干等着
2. npm run start而不是直接webpack-dev-server，前者基于当前package.json中的版本，后者是基于系统版本。