webpack 多模块单独打包配置 - CSDN
精华内容
参与话题
  • 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打包这3个js?
    只需修改webpack的配置文件webpack.config.js:

    // entry是入口文件,可以多个,代表要编译那些js
        entry:['./src/main.js','./src/login.js','./src/reg.js'],

    这样就可以全部打包,最终生成./build/js/build.js

    1,那么如果我们想最后生成不同的文件,该如何做到呢?
    今天我们就要用到webpack的模块拆分插件

    entry:
        {
            'main':'./src/main.js',
            'user':['./src/login.js','./src/reg.js']
        },

    拆分模块:login.js和reg.js我们都定义给user节点,那么下面我们就来把这个user节点单独打包,核心代码:

    // 拆分插件
            new webpack.optimize.CommonsChunkPlugin({
                name:'user', // 上面入口定义的节点组
                filename:'build-user.js' //最后生成的文件名
            }),

    webpack.config.js全部代码:

    var HtmlWebpackPlugin = require('html-webpack-plugin');
    var webpack = require('webpack');
    
    module.exports = {
        // entry是入口文件,可以多个,代表要编译那些js
        //entry:['./src/main.js','./src/login.js','./src/reg.js'],
    
        entry:
        {
            'main':'./src/main.js',
            'user':['./src/login.js','./src/reg.js']
        },
    
        output:{
            path: __dirname+'/build/js', // 输出到那个目录下(__dirname当前项目目录)
            filename:'build.js' //最终打包生产的文件名
        },
        plugins:[
            new HtmlWebpackPlugin({
                filename: __dirname+'/build/html/login-build.html',
                template:__dirname+'/src/tpl/login.html',
                inject:'head',
                hash:true
            }),
    
            // 拆分插件
            new webpack.optimize.CommonsChunkPlugin({
                name:'user', // 上面入口定义的节点组
                filename:'build-user.js' //最后生成的文件名
            }),
        ]
    };

    这里写图片描述

    然后再来看看html模板文件的变化:
    这里写图片描述

    展开全文
  • webpack对css进行单独打包

    千次阅读 2018-03-30 16:53:16
    目标:项目中所有的css文件全部打包到dist下面的css文件夹下面; ** 一、webpack对css的处理 我们都知道webpack是可以直接去处理javascript的代码,但是对于css、image、font等,是不能直接处理的,需要使用...

    **

    目标:项目中所有的css文件全部打包到dist下面的css文件夹下面;

    **


    一、webpack对css的处理

    我们都知道webpack是可以直接去处理javascript的代码,但是对于css、image、font等,是不能直接处理的,需要使用到loader将其转化成javbascript代码片,然后在对其进行处理

    对于处理css,需要使用到的loader是:style-loader、css-loader;
    先把这些loader下载下来

    命令行执行

    npm install style-loader css-loader --save-dev

    下载好了之后,webpack.config.js配置如下
    在module的配置里面去配置loader选项

    module:{
        rules:[
          {
            test:/\.css$/,
            use:["style-loader","css-loader"]//注意:loader是从又往左开始加载处理的,所以先执行css-loader
          }
        ],
      },

    但是这样会将css打包到对应的js里面去,那么页面加载的时候会先解析完了js之后再去加载css,这样会影响用户体验

    所以我们需要将css单独提取出来,以link的方式注入到文件里面

    二、使用ExtractTextWebpackPlugin单独抽取css注入

    实现需要下载该插件

    npm init

    更改webpack.config.js配置

    const path = require('path');
    const webpack = require('webpack')
    //引入插件
    const ExtractTextPlugin = require("extract-text-webpack-plugin");
    
    const configs = {
      entry:{
        'commom':['./src/page/common/index.js'],
        'index':['./src/page/index/index.js'],
        'login':['./src/page/login/index.js']
      },
      output:{
        path:path.resolve(__dirname, 'dist'),
        filename:'js/[name].js'
      },
      externals:{
        //可以把外部的变量或模块加载进来,比如cdn引入的jquery,想要按需模块化引入
         'jquery':'window.jQuery'
      },
      module:{
        rules:[
          {
            test:/\.css$/,
            //注意:这里还需要更改一下
            use:ExtractTextPlugin.extract({
              fallback: "style-loader",
              use: "css-loader"
            })
          }
        ]
      },
      plugins:[
        new webpack.optimize.CommonsChunkPlugin({
          name : 'common',
          filename : 'js/base.js'
        }),
        //这里会按照output的路径打包到css文件夹下面对应的css的名字
        new ExtractTextPlugin('css/[name].css')
      ]
    }
    module.exports= configs

    这样就将 entry入口文件里面所引用到的所有的css打包成单独的css文件了,

    如果你的样式文件大小较大,这会做更快提前加载,因为 CSS bundle 会跟 JS bundle 并行加载。

    关于less和sass的文件打包,这里就不多做叙述。可以参照
    https://blog.csdn.net/lhtzbj12/article/details/79188447

    展开全文
  • Webpack 简称模块打包机 在一个Web项目中 会引入很文件 例如css文件 js文件 字体文件 图片文件 模板文件 等 引入过多文件将导致网页加载速度变慢 而Webpack则可以解决各个包之间错综复杂的依赖关系 Webpack是前端...

    一、介绍

    Webpack 简称模块打包机
    在一个Web项目中 会引入很多文件 例如css文件 js文件 字体文件 图片文件 模板文件 等
    引入过多文件将导致网页加载速度变慢 而Webpack则可以解决各个包之间错综复杂的依赖关系

    Webpack是前端的一个项目构建工具 基于Node.js开发
    因此 若要使用webpack 必须先安装Node.js

    借助Webpack这个前端自动化构建工具 可以完美实现资源的合并 打包 压缩 混淆等诸多功能

    示意图:
    在这里插入图片描述

    官网:https://webpack.github.io


    二、安装

    在新版本中 需要分开安装webpackwebpack-cli

    安装webpack:

    • 方式一:运行npm i webpack -g全局安装webpack 这样就能全局使用webpack的命令了
      在这里插入图片描述

    • 方式二:在项目根目录运行npm i webpack --save-dev以安装到项目依赖中
      在这里插入图片描述

    (注:可能是我的webpack是最新版本的关系 我只有方式二可用 我用了方式一安装后还是提示未安装webpack 有了解的大佬可在评论留言解惑)

    安装webpack-cli:

    在项目根目录下输入npm install webpack-cli -g 进行全局安装
    在这里插入图片描述


    三、打包

    用Webpack打包 可以实现兼容性的转换

    不推荐直接在页面文件里引用任何包和任何css文件 这会拖慢项目的加载速度
    可在一个单独的JS文件里定义 这样 只需加载该JS文件即可

    示例目录

    • src 存放源代码

      • css
      • images
      • js
      • index.html 首页
      • main.js 项目的JS入口文件
    • dist 项目发布目录

    1、首先 初始化npm

    在这里插入图片描述

    2、用npm安装所需的包

    在这里插入图片描述

    3、编写JS入口文件(被打包的文件)

    使用Webpack之后 可以在JS脚本文件里引入另外的JS脚本文件
    由Webpack来处理JS文件之间的互相依赖关系
    这就使得 整个页面只引入一个JS文件成为可能

    import ... from ...这种语法是ES6中导入模块的方式 会自动从node_modules里导入指定的包

    import $ from "jquery" // 导入JQuery模块
    
    $(function()
    {
        $("li:odd").css("backgroundColor","red")
        $("li:even").css("backgroundColor","blue")
    })
    

    由于ES6的代码过于高级 浏览器浏览器不识别 解析不了 因此在浏览器中该行的执行会报错

    此时 可在项目根目录下 输入webpack ./src/main.js -o ./dist/bundle.js
    这代表着 用webpack对src目录下的main.js进行打包处理 处理完毕后的文件是dist目录下的bundle.js

    语法:webpack 要打包的文件的路径 -o 输出的打包好的文件路径
    在这里插入图片描述
    经过Webpack的打包处理 解决了兼容性的问题 可在页面中直接引用

    4、在页面中引入经过webpack转换后的js文件:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- 引入经过webpack转换 从main.js转换成的bundle.js -->
        <script src="../dist/bundle.js"></script>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </body>
    </html>
    

    四、在配置文件中指定打包路径

    每当修改js原文件 都需要重新进行一次webpack的打包
    然而 每次要指定原文件路径和输出文件路径
    通过修改Webpack的配置文件 可实现只输入webpack即可自动打包

    在项目根目录下创建一个名为webpack.config.js的配置文件(该名称是固定的):

    由于webpack是基于Nodejs构建的 因此可使用Nodejs中的语法

    // 导入path模块
    const path=require("path")
    
    // 该配置文件通过Node语法中的模块操作 向外暴露配置对象
    module.exports={
        entry:path.join(__dirname,"./src/main.js"), // 指定要使用webpack打包的文件的路径和名称
        output:{
            path:path.join(__dirname,"./dist"), // 指定使用webpack打包后输出的文件的路径
            filename:"bundle.js" // 指定指定使用webpack打包后输出的文件的名称
        }
    }
    

    如此配置完毕之后 输入webpack 就相当于输入webpack ./src/main.js -o ./dist/bundle.js

    其执行顺序是:

    • 1、webpack发现用户并没有在命令中指定打包入口和出口
    • 2、随后 webpack就会去项目根目录中查找名为webpack.config.js的配置文件
    • 3、当找到配置文件后 webpack会解析该配置文件 解析完毕之后 得到文件中配置的配置对象(即module.exports暴露的配置对象)
    • 4、webpack拿到配置对象后 即可成功获得配置对象中指定的入口和出口 再根据该入口和出口进行打包构建

    展开全文
  • webpack打包特定的文件

    千次阅读 2019-06-18 14:50:55
    由于项目需要,在开发时的接口地址跟部署的接口地址不一致,所以我们要弄成可配置的,即单独出来一个js文件放我们的接口地址,然后希望该js文件不被打包进去,同时也就希望这个js文件里面的内容不被打包,这样在项目...

    使用vue+webpack创建项目的时候会自动生成一个static文件夹,在static文件夹里面我们可以放一些会经常变化的文件或者照片啥的,但是用的时候需要写上绝对路径。由于项目需要,在开发时的接口地址跟部署的接口地址不一致,所以我们要弄成可配置的,即单独出来一个js文件放我们的接口地址,然后希望该js文件不被打包进去,同时也就希望这个js文件里面的内容不被打包,这样在项目打包后我们也可以对接口进行修改。

    1、在static目录下新建一个js文件来存放我们的接口地址

    image

    image

    上面的apiUrl放置了开发时的接口地址

    2、我们需要把接口地址作为全局变量使用,在项目的根目录下创建.eslintrc.json文件来放置我们的全局变量

    image

    设置为false是说明该变量为可读而不可写的,为true就是可写的

    3、接下来就是在index.html页面使用script标签引入该文件了,不可以使用import或者是require,如果使用了那么文件中的内容在其他模块中使用的时候也会被一起打包进去,所以尽管打包后更改了apiUrl.js里面的内容配置也不会起效果。

    image

    4、最后就可以在其他模块直接使用这个全局变量啦,但是由于加载的顺序问题,我们在其他模块引用这个全局变量的时候,我们插入的这个script标签的内容还没有被加载出来(所以后面打包完后需要更改一下加载顺序,后续讲到)

    image

    用typeof判断该变量是否已经引入了,避免还没引入的时候使用而报错。

    5、打包,打包前我们需要更改一下我们的生产环境(不同于开发环境)的publicPath,避免放到服务器的时候路径不一致

    image

    6、运行npm run build打包后会发现我们的apiUrl会自动的放到static/js文件夹下,不需要我们手动放进去,打包后的文件都放在dist目录下

    image

    手动把引入的文件提到第一个script标签

    7、最后就可以把我们的dist文件夹下的东西放到服务器部署啦,接口地址改变的时候直接修改apiUrl.js里面的内容就可以啦。

    perfect.

     

     

    展开全文
  • webpack打包原理和manifest文件分析

    万次阅读 2017-08-01 11:45:19
    分析了webpack打包的原理,并解读了webpack打包生成的代码和其工作机制
  • webpack4打包多个css的两种方法

    万次阅读 2018-07-23 10:18:38
    配置文件./conf/webpack.dev.js: const path = require("path"); module.exports = { mode: "development", //打包为开发模式 entry: "./src/main", //入口文件,从项目根目录指定...
  • webpack的面试题总结

    千次阅读 2019-07-25 20:53:51
    随着现代前端开发的复杂度和规模越来越庞大,已经不能抛开工程化来独立开发了,如react的jsx代码必须编译后才能在浏览器中使用;又如sass和less的代码...在众多前端工程化工具中,webpack脱颖而出成为了当今最...
  • 前端工程化-webpack原理

    万次阅读 2020-10-11 11:17:56
    1、plugin通过钩子机制实现 2、往钩子上挂载任务,一般是通过一个函数或者是一个包含apply方法的对象 3、brower sync自动编译自动刷新
  • webpack篇:编译JS的正确姿势

    千次阅读 2016-08-13 10:25:26
    比如,一个单独的文件就是一个模块。使用require来加载模块,返回文件内部的exports对象。是否和nodejs的写法很像?确实,nodejs实现并推动了这个规范(一部分)。 有了这个规范,js可以在任何地方运行,不只是浏览...
  • 参考1、 webpack的很详细的教程 阮一峰大神写的 https://github.com/ruanyf/webpack-demos#demo01-entry-file-source 2、 官方的文档,我看了一点太了没有仔细的看完 http://webpack.github.io/docs/usage.html3...
  • 一般单页应用是离不开路由的,那么一般引入组件的时候大家习惯性的使用import XXX from ‘XXX’,这样的话,webpack打包的时候会将import的组件全部打包进去,这里我是利用react-route来实现路由机制的,这里可以...
  • webpack4升级指南以及从webpack3.x迁移

    万次阅读 2018-03-06 15:07:08
    几天前webpack发布了新版本v4.0.0,其中做了很改动,包括0配置以及移除了CommonsChunkPlugin等。由此而来的还有之前webpack3.x的项目如何迁移到新的webpack版本,本文就一个新的vue-cli创建的基于webpack的项目...
  • webpack面试题汇总

    千次阅读 2018-11-21 09:56:24
    这是webpack系列文章的十一篇,整理了一些关于webpack的面试题,对之前的内容做一次总结 webpack官网https://webpack.js.org/ webpack中文网https://www.webpackjs.com/ ...webpack是一个打包模块化...
  • webpack4.x开发环境配置

    万次阅读 多人点赞 2019-10-13 14:00:46
    写这篇文章的初衷在于,虽然网络上关于webpack的教程不少,但是大多已经过时,由于webpack版本更新后许多操作变化很大,很教程的经验已经不适合。当我们使用npm安装webpack时,若不指定webpack的版本,将默认安装...
  • webpack的extract-text-webpack-plugin插件

    千次阅读 2019-03-12 14:12:11
    我们先聊聊webpack的一个打包机制,webpack本来只能能打包处理.js文件,但是通过强大的loader之后,可以打包处理各种类型的文件。比如:.css文件等。 表面上webpack通过loader可以打包各种文件了,已经完美了。但是...
  • webpack 打包 存放到指定位置
  • webpack面试题

    千次阅读 2019-04-29 08:49:33
    1. webpack3和webpack4的区别 1.1. mode/–mode参数 新增了mode/--mode参数来表示是开发还是生产(development/production) production 侧重于打包后的文件大小,development侧重于goujiansud 1.2. 移除loaders,...
  • Webpack相关面试题整理

    千次阅读 2019-04-18 17:32:18
    1. gulp/grunt 与 webpack的区别是什么? grunt 与 gulp Grunt和Gulp属于一类的都是构建工具,只是Grunt是根据...Webpack 是目前最热门的前端资源模块化管理和打包工具。 把一切都视为模块:不管是 CSS、JS、Image...
  • webpack的安装以及简单实用

    千次阅读 2018-04-05 21:23:12
    WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。二、webpack和...
  • 以前一直使用create-react-app这个脚手架进行react开发,后面因为一些自定义的配置,转而使用webpack搭建一套自己的脚手架。但是在使用webpack打包之后发现,纳尼?怎么文件这么大??? 于是研究了一下如何处理...
1 2 3 4 5 ... 20
收藏数 8,975
精华内容 3,590
热门标签
关键字:

webpack 多模块单独打包配置