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 相关文章推荐
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
dess中一个简单的多路委托的实现
Jul 20 Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
JavaScript实现动态删除列表框值的方法
Aug 12 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
webpack3升级到webpack4遇到问题总结
Sep 30 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提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
Python实现竖排打印传单手机号码易撕条
2015/03/16 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
Python实现随机漫步功能
2018/07/09 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
thinkphp5 路由分发原理
2021/03/18 PHP
DELPHI面试题研发笔试试卷
2015/11/08 面试题
大专生的学习自我评价
2013/12/04 职场文书
会计实习自我鉴定
2013/12/04 职场文书
公司离职证明范本
2014/01/13 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
爱国主义演讲稿
2014/05/07 职场文书
美容院合作经营协议书
2014/10/10 职场文书