webpack 同时输出到多个目录_webpack打包多个文件输出到指定目录 - CSDN
精华内容
参与话题
  • webpack4打包多个js文件

    万次阅读 2018-07-19 16:36:15
    1.多个js文件不合并打包(分别打包) 配置文件./conf/webpack.dev.js const path = require("path"); module.exports = { mode: "development", //打包为开发模式 // 入口配置的对象中,属性...

    默认文件目录:

    1.多个js文件不合并打包(分别打包)

    配置文件./conf/webpack.dev.js

    const path = require("path");
    module.exports = {
        mode: "development", //打包为开发模式
        // 入口配置的对象中,属性为输出的js文件名,属性值为入口文件
        entry: {
        	main1:"./src/main1",
        	main2:"./src/main2"
        }, //入口文件,从项目根目录指定
        output: { //输出路径和文件名,使用path模块resolve方法将输出路径解析为绝对路径
            path: path.resolve(__dirname, "../dist/js"), //将js文件打包到dist/js的目录
            filename: "[name].js" //使用[name]打包出来的js文件会分别按照入口文件配置的属性来命名
        }
    }

    打包过程:

    打包结果:

    2.多个js中部分合并打包成一个js文件

    配置文件./conf/webpack.dev.js:

    const path = require("path");
    module.exports = {
        mode: "development", //打包为开发模式
        // 出口对象中,属性为输出的js文件名,属性值为入口文件
        entry: {
        	main1:"./src/main1",
        	main:["./src/main2","./src/main3"]
        }, //入口文件,从项目根目录指定
        output: { //输出路径和文件名,使用path模块resolve方法将输出路径解析为绝对路径
            path: path.resolve(__dirname, "../dist/js"), //将js文件打包到dist/js的目录
            filename: "[name].js" //使用[name]打包出来的js文件会分别按照入口文件配置的属性来命名
        }
    }

    3.多个js全部打包成一个js文件

    配置文件./conf/webpack.dev.js:

    const path = require("path");
    module.exports = {
        mode: "development", //打包为开发模式
        // 出口对象中,属性为输出的js文件名,属性值为入口文件
        entry: ["./src/main1","./src/main2","./src/main3"], //入口文件,从项目根目录指定
        output: { //输出路径和文件名,使用path模块resolve方法将输出路径解析为绝对路径
            path: path.resolve(__dirname, "../dist/js"), //将js文件打包到dist/js的目录
            filename: "main.js" 
        }
    }

     

    展开全文
  • webpack输出多个文件

    千次阅读 2017-10-20 15:25:25
    webpack输出多个文件

    配置: webpack.config.js

     entry:{
         "bundle":"./app/main.js",
         "test":"./app/test.js"
     }, 
    output:{
        path:__dirname+ "/public",
        filename:"[name].js"
    },
    展开全文
  • Webpack多个文件输出到多个目录

    千次阅读 2016-05-04 10:56:42
    entry = { "button": "demo/button/index.jsx"), "grid": "demo/grid/index.jsx") }, output: { path: 'dist/js', filename: "[name].js", chunkFilename: "[name].js" }, plugins: [ new
    entry = {
        "button": "demo/button/index.jsx"),
        "grid": "demo/grid/index.jsx")
    },
    output: {
        path:  'dist/js',
        filename: "[name].js",
        chunkFilename: "[name].js"
    },
    plugins: [
        new CommonsChunkPlugin("common.js", ["button", "grid"])
    ]

    output中的[name]对应于entry中的key值,因此生成后的文件名是button.js和grid.js。

    展开全文
  • webpack输出管理 index.html <!doctype html><html>    <head>        <title>webapck</title>  &...

    webpack输出管理

    • index.html
      • 需要注意的是,不在header中添加‘print.bundle.js’文件也可以得到一样的结果,该demo只是进行演示
    <!doctype html>
    <html>
        <head>
            <title>webapck</title>
            <script src="./print.bundle.js"></script>
        </head>
        <body>
            <script src="./bundle.js"></script>
        </body>
    </html>
    • index.js
    import _ from 'lodash'
    // 导入print.js文件
    import printMe from  './print.js'
    function component() {
        var element = document.createElement('div');
        var btn = document.createElement('button');
      
        // Lodash(目前通过一个 script 脚本引入)对于执行这一行是必需的
        element.innerHTML = _.join(['Hello', 'webpack'], ' ');
        
        
        btn.innerHTML = 'Click me and check the console!';
        btn.onclick = printMe;
        element.appendChild(btn);
    
    
        return element;
      }
      
      document.body.appendChild(component());
    • print.js
    export default function printMe () {
        console.log('print.js');
    }
    • webpack.config.js
      • 注意,entry是一个对象,而不是一个字符串,表示有多个入口文件
      • output的是filename是 ‘[name].bundle.js’,’[name]'是entry对象的文件入口字段
    const path = require('path');
    
    module.exports = {
      entry: {
        app: './src/index.js',
        print: './src/print.js'
      },
      output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
      }
    };
    • package.json
    {
      "name": "webpack-demo1",
      "version": "1.0.0",
      "description": "",
      "private": "true",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^5.1.0",
        "webpack-cli": "^4.0.0"
      },
      "dependencies": {
        "lodash": "^4.17.20"
      }
    }
    
    • 运行npm run build
      在这里插入图片描述
      在这里插入图片描述
    展开全文
  • 在学习webpack时,由于资料太少了,网上查询的资料都是只能将文件打包指定目录下。 查了一下,webpack貌似没有针对每文件配置编译后的路径。 没办法,只好自己想办法。 例如我的当前目录结构为, button...
  • webpack4打包多个css的两种方法

    万次阅读 2018-07-23 10:18:38
    demo目录: 1.将css打包js内部 配置文件./conf/webpack.dev.js: const path = require("path"); module.exports = { mode: "development", //打包为开发模式 entry: "./src/main...
  • webpack的static和assets目录区别

    千次阅读 2017-09-15 16:03:01
    图一:引用了三图片,前两是绝对路径,后一是相对路径。 图二:ctrl+h查找绝对路径在所出的包里面的位置。可以发现,页面中使用绝对路径时,图片文件不会被打包进js,图片文件需要被原原本本以...
  • 在vue中用webpack打包之后运行文件问题以及相关配置

    万次阅读 热门讨论 2017-03-15 14:17:31
    最近在用vue写一小项目,其中就用到了vue脚手架工具vue-cli,在测试打包后能否运行过程中遇到不少问题,而且在网上这些问题答案都不太好找,废话不说,进入正题。 a.执行打包命令:npm run build  b.打包之后...
  • webpackwebpack-dev-server的区别

    千次阅读 2019-12-31 11:26:33
    webpack webpack-dev-server 二者的区别 webpack ...一模块打包器,根据entry指示webpack应该使用哪个模块,来作为...每依赖项随即被处理,最后输出到output字段指定的文件中 main.js引入child1.js、chi...
  • vue第五天

    万次阅读 2020-01-04 12:38:40
    Vue.js - Day5 - Webpack 在网页中会引用哪些常见的静态资源? JS .js .jsx .coffee .ts(TypeScript 类 C# 语言) CSS .css .less .sass .scss Images .jpg .png .gif .bmp .svg 字体文件(Fonts) ...
  • webpack4.x开发环境配置

    万次阅读 多人点赞 2019-10-13 14:00:46
    写这篇文章的初衷在于,虽然网络上关于webpack的教程不少,但是大多已经过时,由于webpack版本更新后许多操作变化很大,很教程的经验已经不适合。当我们使用npm安装webpack时,若不指定webpack的版本,将默认安装...
  • 查看 webpack 打包后所有组件与组件间的依赖关系,针对多余的包文件过大,剔除首次影响加载的效率问题进行剔除修改,本次采用的是 ==webpack-bundle-analyzer==(可视化视图查看器)== 介绍1:webpack-bundle-...
  • 翻译了webpack官方英文文档,整合互联网上对webpack介绍的教程,完整全面的认识使用webpack
  • 新手入门,webpack入门详细教程

    千次阅读 2018-11-15 12:55:13
    研究了两天webpack的使用,刚开始看书,但是书不太适合我,很细节流程没讲明白,于是乎我就上网搜索,综合了很大神的帖子,摸索了两天,终于弄清楚其中所有的流程,细节,放在这里进行分享,也防止自己忘记了还...
  • 在一Web项目中 会引入很文件 例如css文件 js文件 字体文件 图片文件 模板文件 等 引入过多文件将导致网页加载速度变慢 而Webpack则可以解决各个包之间错综复杂的依赖关系 Webpack是前端的一项目构建工具 基于...
  • 教你如何使用webpack打包你的项目

    万次阅读 2017-06-25 15:37:10
    webpack是前端开发中比较常用的打包工具之一,另外还有gulp,grunt。之前没有涉及过打包这块,这里介绍一下使用webpack打包的流程。
  • webpack输出(Output)

    千次阅读 2017-09-08 14:56:46
    注意,即使可以存在多个入口起点,但只指定一个输出配置。 一.用法 a.filename 用于输出文件的文件名。b.目标输出目录 path 的绝对路径。 webpack.config.js: const config = { output: { filename: 'bund
  • webpack把我们的业务模块分开打包

    万次阅读 2016-08-21 20:14:20
    只需修改webpack的配置文件webpack.config.js:// entry是入口文件,可以多个,代表要编译那些js entry:['./src/main.js','./src/login.js','./src/reg.js'],这样就可以全部打包,最终生成./build/js/build.js1,...
  • webpack的安装和基本使用

    万次阅读 2018-08-23 22:05:12
    webpack概念 中文文档官网: https://www.webpackjs.com/ 网页中常用的静态资源: JS(.js .jsx .coffee .ts(TypeScript中间语言,不能自浏览器中运行,需要编译器进行编译为js语言))  CSS(.css .less .sass -&...
  • 彻底解决webpack打包慢

    千次阅读 2018-06-13 09:47:41
    前端开发一crm项目的时候,因为项目内容比较庞大,导致webpack编译和打包都巨慢,实在是影响开发效率,所以着手升级webpackwebpack4-es6-react webpack4-es6-react是一全新的基于webpack4、react16、es6...
1 2 3 4 5 ... 20
收藏数 22,574
精华内容 9,029
关键字:

webpack 同时输出到多个目录