webpack打包并将文件加载到指定的位置方法


Posted in Javascript onFebruary 22, 2018

使用webpack打包,最爽的事情莫过于可以直接require文件了,但是这

同时带来了一个问题,就是所有的文件整合到一起,那这一个包就太大了。

基于此:下面我们来了解下webpack的打包(主要是将如何将我们需要的内容模块,分开打包,

并且按照我们自己设定的存放路径进行存放)

首先在webpack.config.js文件中

entry入口函数出表示出哪些是需要单独打包成一个js包的:

entry: {
  main: path.resolve(__dirname,'src/index.js'),
  jq: ['jquery'],
  react: ['react'],
  redom: ['react-dom']
},
output: {
  path: path.resolve(__dirname,'dist'),
  publishPath: 'dist/',
  filename: '[name].js'
 },
plugin: [
  new webpack.optimize.CommonsChunkPlugin('jq','jq.js'),
  new webpack.optimize.CommonsChunkPlugin('vendors','vendors.js'),
  new webpack.optimize.CommonsChunkPlugin('redom','redom.js')
]

如上配置,这样在文件生成的时候dist目录下就会增加jq.js,vendors.js,redom.js这三个js了

以上解决了我们要打包多个包的问题;

那如果我们想要将打包好的js存放在指定的位置又要如何进行操作呢,不用着急,下面就来具体

的实现以下(其实区别主要是在entry入口函数那儿):

entry: {
  './common/main': path.resolve(__dirname,'src/index.js'),
  './jquery/jq': ['jquery'],
  './react/react': ['react'],
  './reactdom/redom': ['react-dom']
 },

如上所示这样四个js就会分别存放到我们制定的dist下的四个文件夹中了。(标注:这时候就不

需要用到webpack.optimize.CommonsChunkPlugin插件了)

最后贴上左右的webpack.config.js代码:

var webpack = require('webpack');
var path = require('path');
module.exports = {
 entry: {
  './common/main': path.resolve(__dirname,'src/index.js'),
  './jquery/jq': ['jquery'],
  './react/react': ['react'],
  './reactdom/redom': ['react-dom']
 },
 output: {
  path: path.resolve(__dirname,'dist'),
  publishPath: 'dist/',
  filename: '[name].js'
 },
 module: {
  loaders: [
   {
    test: /\.scss$/,
    loader: 'style!css!sass'
   },
   {
    test: /\.js$/,
    exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\/|presets\//,
    loader: 'babel'
   },
   {
    test: /\.(png|jpg|gif)$/,
    loader: 'url?limit=40000'
   }
  ]
 },
 babel: {
  presets: ['es2015','stage-0','react'],
  plugins: ['transform-runtime',["antd",{"style": "css"}]]
 },
 resolve: ['js','jsx','css'],
 plugins:[
  new webpack.ProvidePlugin({
   $:"jquery",
   jQuery:"jquery",
   "window.jQuery":"jquery"
  })
 // new webpack.optimize.CommonsChunkPlugin('jq','jq.js'),
 // new webpack.optimize.CommonsChunkPlugin('vendors','vendors.js'),
 // new webpack.optimize.CommonsChunkPlugin('redom','redom.js')
 ]
};

以上这篇webpack打包并将文件加载到指定的位置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 中的事件教程
Apr 05 Javascript
javascript数组使用调用方法汇总
Dec 08 Javascript
javascript 二分法(数组array)
Apr 24 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
window resize和scroll事件的基本优化思路
Apr 29 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
js中的闭包实例展示
Nov 01 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
javascript canvas实现雨滴效果
Jun 09 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 #Javascript
webpack将js打包后的map文件详解
Feb 22 #Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 #Javascript
深入理解ES6中let和闭包
Feb 22 #Javascript
vue+iview+less+echarts实战项目总结
Feb 22 #Javascript
在vscode中统一vue编码风格的方法
Feb 22 #Javascript
vue webpack打包优化操作技巧
Feb 22 #Javascript
You might like
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
扩展String功能方法
2006/09/22 Javascript
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
浅谈node的事件机制
2017/10/09 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
python Tcp协议发送和接收信息的例子
2019/07/22 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
大型车展策划方案
2014/02/01 职场文书
主要负责人任命书
2014/06/06 职场文书
安全生产工作汇报
2014/10/28 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python
Java使用HttpClient实现文件下载
2022/08/14 Java/Android
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers