webpack学习-shimming模块补充(https://webpack.js.org/guides/shimming/)
2017-08-09 10:59
435 查看
1.要解决的问题:往应用的每个模块里注入全局变量,即每个模块都能访问的变量,例如引入jquery
方法:利用ProvidePlugin插件,例子如下:
2.要解决的问题:对于某些模块,需要将模块中的this置为window。但是当模块运行在commonJs环境中时,this是指向module.exports的。在这种情况下,你可以利用import-loader,其作用是将变量引入模块内部。例子如下:
3.要解决的问题:在某个模块写了一个变量或者函数,希望外部能够使用它,使用exports-loader,其作用是将变量导出,例子如下:
4.如果你想在最后输出的html的head里,添加一个script标签和对应的js文件,可以使用script-loader
5.如果某段代码没有AMD或者CommonJS版本,你想直接将其打入dist文件夹,可以使用noParse,webpack将直接将这个模块写入输出,不会解析它。
方法:利用ProvidePlugin插件,例子如下:
module.exports = { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ] };
2.要解决的问题:对于某些模块,需要将模块中的this置为window。但是当模块运行在commonJs环境中时,this是指向module.exports的。在这种情况下,你可以利用import-loader,其作用是将变量引入模块内部。例子如下:
module.exports = { module: { rules: [{ test: require.resolve("some-module"), use: 'imports-loader?this=>window' }] } };
3.要解决的问题:在某个模块写了一个变量或者函数,希望外部能够使用它,使用exports-loader,其作用是将变量导出,例子如下:
module.exports = { module: { rules: [{ test: require.resolve("some-module"), use: 'exports-loader?file,parse=helpers.parse' // adds below code the file's source: // exports["file"] = file; // exports["parse"] = helpers.parse; }] } };
4.如果你想在最后输出的html的head里,添加一个script标签和对应的js文件,可以使用script-loader
5.如果某段代码没有AMD或者CommonJS版本,你想直接将其打入dist文件夹,可以使用noParse,webpack将直接将这个模块写入输出,不会解析它。
相关文章推荐
- webpack学习-tree shaking(https://webpack.js.org/guides/tree-shaking/)
- webpack学习系列-lazy-loading (https://webpack.js.org/guides/lazy-loading/)
- webpack学习-缓存(https://webpack.js.org/guides/caching/)
- webpack学习系列三(https://webpack.js.org/concepts/output/)
- webpack学习系列二(https://webpack.js.org/concepts/entry-points/ 翻译)
- webpack代码分割(https://webpack.js.org/guides/code-splitting/)
- webpack-生产环境最佳实践(https://webpack.js.org/guides/production/)
- webpack 学习笔记 --- node.js开发
- 结合nodejs+webpack+vuejs开启时尚学习套路
- node.js学习之webpack打包react最简单用法
- webpack+vue-cli项目中引入外部非模块格式js的方法
- js学习笔记:webpack基础入门(一)
- Webpack学习记录(一)模块热替换
- 学习 webpack+vue.js (2、.vue文件的使用)
- webpack学习(六)打包压缩js和css
- Vue.js学习之vue-router vuex axios webpack
- 傻瓜式学习webpack(五)——css的抽离和html的自动引入js/css
- webpack学习-webpack.config.js配置
- node+webpack环境搭建 vue.js 2.0 基础学习笔记
- 学习 webpack+vue.js (3、多页面)