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 相关文章推荐
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
JavaScript判断变量是否为空的自定义函数分享
Jan 31 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 Javascript
jQuery 插件实现随机自由弹跳气泡样式
Jan 12 Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
js利用拖放实现添加删除
Aug 27 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(3) php 函数
2010/02/15 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
[48:38]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs Secret
2018/03/31 DOTA
Python实现定时任务
2017/02/08 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
Python 操作文件的基本方法总结
2017/08/10 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
Python文件读写常见用法总结
2019/02/22 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
python自动发微信监控报警
2019/09/06 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
岗位说明书范文
2014/05/07 职场文书
个人欠款担保书
2014/05/20 职场文书
MySQL修改默认引擎和字符集详情
2021/09/25 MySQL