// CommonJS
var counter = 1;
function incCounter() {
counter++;
}
module.exports = {
counter: counter,
incCounter: incCounter,
};
// ES6 Module
export let counter = 1;
export function incCounter() {
counter++;
}
在about.vue中测试如下：
// CommonJS
var test = require('../test');
export default {
created() {
console.log(test.counter); // 1
test.incCounter();
console.log(test.counter); // 1
}
}
// ES6 Module
import { counter, incCounter } from '../test';
export default {
created() {
console.log(counter); // 1
incCounter();
console.log(counter); // 2
}
}
最终的输出值也印证了前面的解释，更详细的解读请查阅相关资料或书籍。只有深入理解了两者的区别，自然就能明白何时该使用何种规范。当然 ES6 作为未来的趋势，我们应该去做更多的尝试。
异步组件（懒加载）
之前用懒加载的方式是：require.ensure，在 webpack2 中引入了 Code Splitting-Async 的新方法 import()，用于动态引入 ES Module。require.ensure 可以指定 chunkFilename，但是 import 没有很好的途径去指定，webpack3 为了解决这个问题，提出了用魔法注释的方式来指定模块名。
结合 vue-router 可以轻松实现懒加载，配置路由指向异步组件即可实现懒加载，比如：
{
path: '/async',
component: () => import(/* webpackChunkName: "async" */'./views/async.vue')
}
如果你发现使用 import() 运行时报错，有几种情况：
1.babel presets 配置为 es2015，则不支持动态导入功能，因此需要安装支持动态导入的 presets（npm i babel-preset-stage-2 -D），或者 babel 插件（npm i babel-plugin-syntax-dynamic-import -D）；
2.babel presets 配置为 env，但是 modules 配置为 false，babel 则不会解析 import，可以安装插件 （npm i babel-plugin-syntax-dynamic-import -D）解决。
魔法注释虽然指定了块名，但是 webpack 默认的块名配置为 [id].js，即用的模块的 id 作为块名，因此需要我们手动改下配置。
修改 webpack.base.config.js 的 output：
output: {
filename: 'js/[name].js',
chunkFilename: "js/[name].[chunkhash].js"
}
效果如下图：
如果发现魔法注释没有生效，要检查下 .babelrc 的配置项 comments 是否设为 true。或者不配置 comments（默认为true）
extract-text-webpack-plugin 默认不会提取异步模块中的 CSS，需要加上配置：
new ExtractTextPlugin({
allChunks:true,
filename: "css/style.css?[contenthash:8]"
})
内容版权声明：除非注明，否则皆为本站原创文章。