弁言
这里是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,本身今后项目开辟盘算就基于这个,还须要完美。
在写这个过程当中碰到几个问题:
- http://yeoman.io/generators/ 显现不出来,说是one hour synchronize但是超过了一个小时照样没看到。
在此的发起就是直接install yo一下碰运气能不能用,不要干等着 - npm run start而不是直接webpack-dev-server,前者基于当前package.json中的版本,后者是基于体系版本。