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 click([data],fn)使用方法实例介绍
Jul 08 Javascript
原生js事件的添加和删除的封装
Jul 01 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
微信小程序学习之数据处理详解
Jul 05 Javascript
基于Vue实现后台系统权限控制的示例代码
Aug 29 Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
express.js中间件说明详解
Mar 19 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 Javascript
jQuery实现消息弹出框效果
Dec 10 jQuery
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 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
图形数字验证代码
2006/10/09 PHP
PHP入门速成教程
2007/03/19 PHP
php中动态调用函数的方法
2015/03/16 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
浅析javascript中的DOM
2015/03/01 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
Python设计模式之抽象工厂模式
2016/08/25 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
Python函数式编程实例详解
2020/01/17 Python
python 命名规范知识点汇总
2020/02/14 Python
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
皮肤科医师岗位职责
2013/12/04 职场文书
财产保全担保书范文
2014/04/01 职场文书
什么是就业协议书
2014/04/17 职场文书
优秀家长自荐材料
2014/08/26 职场文书
党在我心中演讲稿
2014/09/02 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书