代码中的写法
react
<Route path="movieDetail/:id"
getComponent={
(nextState, callback)=> {
require.ensure([], (require)=> {
callback(null, require("../containers/MovieDetailContainer.js").default)
}, "movieDetail")
}
}
/>
vue
const MovieContainer= r => require.ensure([], () => r(require('../containers/MovieContainer.vue')),'movie')
5.4. 组件库按需加载处理
5.4.1. react中的antd按需加载配置
npm install babel-plugin-import -save-dev
// 修改babel配置文件
{
"presets": ["es2015", "react","stage-0","stage-1","stage-2","stage-3"],
"plugins": [
["import", { "libraryName": "antd","style": "css" }]
]
}
5.4.2. vue中的element按需加载配置
npm install babel-plugin-component-save-dev
// 修改babel配置文件
{
"presets": [
"es2015",
"react",
"stage-0",
"stage-1",
"stage-2",
"stage-3"
],
"plugins": [
"transform-runtime",
[
"component",
[
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]
]
]
}
6. 其他
6.1. 启用source-map
现在的代码是合并以后的代码，不利于排错和定位，只需要在config中添加
devtool: 'source-map',
output: {
sourceMapFilename: '[name].map'
},
这样出错以后就会采用source-map的形式直接显示你出错代码的位置。
6.2. 加载jQuery plugin或者其他legacy第三方库
你的项目有时候会要加载各种各样的第三方库，比如一些jQuery的插件，它们都依赖jQuery，但如果直接引用就会报错jQuery is not undefined这类的错误，因为一些老的库不支持AMD或者CommonJS等一些先进的格式，所以有几种方法解决
// plugin.js
(function ($) {
const shade = "#556b2f";
$.fn.greenify = function() {
this.css( "color", shade );
return this;
};
}(jQuery));
6.2.1. 方法一：webpack.ProvidePlugin
作用：把一个全局变量插入到所有的代码中
修改配置文件
plugins: [
//provide $, jQuery and window.jQuery to every script
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]
//这个也不需要了 因为$, jQuery, window.jQuery已经被注入到每一个js中，都可以直接使用了
//import $ from 'jquery';
import './plugin.js';
...
myPromise.then((number) => {
$('body').append('<p>promise result is ' + number + ' now is ' + moment().format() + '</p>');
//call our jquery plugin!
$('p').greenify();
});
6.2.2. 方法二：import-loader
npm install imports-loader --save-dev
修改配置文件
//注意这种写法 我们把jQuery这个变量直接插入到plugin.js里面了
//相当于在这个文件的开始添加了 var jQuery = require('jquery');
import 'imports?jQuery=jquery!./plugin.js';
//后面的代码一样
myPromise.then((number) => {
$('body').append('<p>promise result is ' + number + ' now is ' + moment().format() + '</p>');
//call our jquery plugin!
$('p').greenify();
});
6.3. exports-loader
从模块中导出变量的功能
// 直接绑定在全局变量window上面
// Hello.js
window.Hello = function(){
console.log('say hello.');
}
//然后我们在index.js文件里去引用这个Hello.js:var hello = require('./Hello.js');。这样引用的结果是变量hello是
//undefined。因为我们在Hello.js文件里没有写module.exports=window.Hello，所以index.js里我们require的结果就是
//undefined。这个时候，exports-loader就派上用场了。我们只用把index.js的代码稍微改动一下：var hello = require
//('exports?window.Hello!./Hello.js');，这个时候，代码就能正确的运行了。变量hello就是我们定义的window.hello啦。
//var hello = require('exports?window.Hello!./Hello.js');这行代码，等于在Hello.js里加上一句module
//.exports=window.Hello，所以我们才能正确的导入。
6.4. expose-loader
把一个模块导出并付给一个全局变量
require("expose?libraryName!./file.js");
// Exposes the exports for file.js to the global context on property "libraryName".
// In web browsers, window.libraryName is then available
//例子中的注释是说把file.js中exports出来的变量付给全局变量"libraryName"。假如file.js中有代码module.exports=1，那么
//require("expose?libraryName!./file.js")后window.libraryName的值就为1（我们这里只讨论浏览器环境）
6.5. resolve属性
resolve: {
//注意一下, extensions webpack2第一个不是空字符串! 对应不需要后缀的情况.
extensions: ['.js', '.json', '.sass', '.scss', '.less', 'jsx', '.vue'],
//模块别名定义，方便后续直接引用别名，无须多写长长的地址
alias: {
'assets': path.resolve(__dirname, './src/assets'),
'components': path.resolve(__dirname, './src/components')
}
},
6.6. external属性
// 配置了这个属性之后 vue 和 vue-router这些第三方的包都不会被构建进 js 中，那么我们就需要通过 cdn 进行文件的引用了
//externals对象的key是给require时用的，比如require('vue'),，对象的value表示的是如何在global（即window）中访问到该对象，这里是window.Vue
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter'
},
免责说明
1、本博客中的文章摘自网上的众多博客，仅作为自己知识的补充和整理，并分享给其他需要的coder，不会用于商用
2、因为很多博客的地址已经记不清楚了，所以不会在这里标明出处
相关文章
精彩导读
热门资讯
关注我们
