webpack 入口文件更新自动打包_webpack打包多入口打包完之后会有很多chunk文件 - CSDN
精华内容
参与话题
  • 解决webpack打包慢的解决办法汇总

    万次阅读 2016-07-01 17:53:22
    刚开始用webpack,谈一谈解决webpack打包慢的问题的方法技巧1webpack打包的时候第一次总是会做很长的准备工作,包括加载插件之类的。在刚接触webpack的时候总是webpack一下-测一下-改一下-再webpack一下,这种方式...

    刚开始用webpack,谈一谈解决webpack打包慢的问题的方法

    技巧1

    webpack在打包的时候第一次总是会做很长的准备工作,包括加载插件之类的。在刚接触webpack的时候总是webpack一下-测一下-改一下-再webpack一下,这种方式最后让很多人崩溃了觉得webpack一点都不好用。其实这是错误的使用方式。
    正确的方式应直接执行webpack --watch 这样webpack会自动编译,第一回的时候确实很慢,但之后的自动编译就要快了好多,打包时间相差几倍。

    技巧2

    webpack配合的react,jquery一些共有的库去使用,虽然没写几行代码却发现我靠打个文件居然好几M了。能不能不让这些共有库打入我们的文件呢?

    externals: 
            {
                'antd':true,
                'react': 'React',
                'react-dom': 'ReactDOM'
            }

    在webpack配置文件的根上加上这些内容。告诉webpack在require(“react”)的时候不要去加载模块,直接去读(这里还不是很明白,有的说“:”后面是window.React,写了后面可以直接使用无需require,待确定后再补充,一般写true就可以了),当然这种方式要在html入口手动引入js文件:

    <script src="node_modules/react/dist/react-with-addons.js"></script>
    <script src="node_modules/react-dom/dist/react-dom.min.js"></script>
    <script src="node_modules/antd/dist/antd.min.js"></script>

    在项目中正常使用require(“react”)试试,不会被打进去了,文件变为了几k,突然感觉webpack这东西还是能用的。

    技巧3

    大部分情况下通过技巧2已经可以搞定大部分问题了,但是在用MaterialUI的时候,点击事件总是报一个错误,大概意思是重复的引入了react什么的。如果出现这个问题,那么请使用技巧3。将那些共有的模块打进另外一个文件中,然后使用CommonsChunkPlugin插件,在webpack –watch非第一编打包的时候就不会重复的打另外一个文件了。

    entry: {
            //这是我自己文件的入口,换成自己的
            main: './apps/main.jsx',
            //这个是把外面的东西打包成common.js
            'common':['./node_modules/react/dist/react-with-addons.min.js','./node_modules/react-dom/dist/react-dom.min.js']
    
        },
    plugins: [
            //把common.js变为共有的,除第一遍打包后就不会再打包了
            new webpack.optimize.CommonsChunkPlugin('common',  'common.js')
        ]
    output: {
            path: path.resolve(containerPath,'dist/'),
            filename: '[name].js'
        }

    在webpack配置文件的根上加上这些内容,在html入口处需要引入common.js

    //确认一下是不是第一回打包后这个文件已经有了
    <script src="dist/common.js"></script>

    这种方式在webpack -watch后第一遍依旧很慢(因为要打common) 之后修改默认打包是就不会再打common了。而且还有一个优点就是不用再引React,jquery一堆文件了,只引common一个文件就ok。

    展开全文
  • 利用webpack实现对html文件的热更新

    千次阅读 2018-04-11 19:35:55
    webpackwebpack-dev-server是一个简单的web服务器,可以帮助我们实现代码的热更新,即在实际开发中只需保存修改完后的代码,不用手动刷新页面就可以看到效果。在使用webpack-dev-server时,会发现在对js、css文件...

           webpack中webpack-dev-server是一个简单的web服务器,可以帮助我们实现代码的热更新,即在实际开发中只需保存修改完后的代码,不用手动刷新页面就可以看到效果。在使用webpack-dev-server时,会发现在对js、css文件中的代码修改时,可以很容易地实现页面热更新;修改html文件内容时,保存代码,页面并没有自动更新。(可以在html-hot-reload项目的中demo1分别修改html、js、css文件试一试)。

           这是因为webpack在运行时它会根据webpack.config.js中入口文件(entry)来开始查询所有的依赖并根据不同的处理器(loader)、插件(plugin)来解析、打包,webpack-dev-server会实时监控webpack打包后的文件并实现热更新。js、css文件很容易实现热更新是因为js文件一般为入口文件或者js文件、css文件与入口文件存在依赖关系,在webpack打包后受到webpack-dev-server的实时监控。由于html与入口文件不存在依赖关系,所以实现不了热更新。可以通过以下两种方法实现对html文件热更新。

    方法一:利用html-webpack-plugin插件

    html-webpack-plugin插件就是在webpack打包时重新生成一个html文件

    (可以在html-hot-reload项目的中demo2中分别修改html、js、css文件查看效果)

    1、安装html-webpack-plugin插件

    npm install --save-dev html-webpack-plugin

     2、在webpack.config.js中配置html-webpack-plugin插件

    ......
    const htmlWebpackPlugin = require('html-webpack')
    
    module.exports = {
      ......
      plugins: [
        new htmlWebpackPlugin({
          template: './index.html'
        })
      ]
      ......
    }

    方法二:在入口文件中引入html文件,并使用raw-loader对html文件进行处理,实现html热更新

    在入口文件中引入html文件是为了让html与入口文件产生依赖,这样在webpack运行时可以打包处理html文件。

    (可以在html-hot-reload项目的中demo3中分别修改html、js、css文件查看效果)

    1、安装raw-loader

    npm install --save-dev raw-loader

    2、在webpack.config.js中配置raw-loader

    module.exports = {
      ......
      module: {
        rules: [
          ......
          {
             test: /\.(htm|html)$/,
             use: [
               'raw-loader'
             ]
          }
          ......
        ]
      }
      ......
    }

    3、在入口文件index.js文件中引入index.html文件

    import '../index.html'

           综上所述,利用以上两种方法,我们可以在webpack搭建的环境中实现对html文件的热更新。可以参考html-hot-reload项目中的代码进行学习理解。

    展开全文
  • 在一个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拿到配置对象后 即可成功获得配置对象中指定的入口和出口 再根据该入口和出口进行打包构建

    展开全文
  • webpack4打包html和压缩js

    万次阅读 2018-07-23 11:23:26
    打包html使用插件html-webpack-plugin 压缩js使用插件uglifyjs-webpack-plugin 配置文件: const path = require("path"); const uglifyjs = require('uglifyjs-webpack-plugin'); const ...

    打包html使用插件html-webpack-plugin

    压缩js使用插件uglifyjs-webpack-plugin

    配置文件:

    const path = require("path");
    const uglifyjs = require('uglifyjs-webpack-plugin');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
        mode: "development", //打包为开发模式
        entry: "./src/js/main", //入口文件,从项目根目录指定
        output: { //输出路径和文件名,使用path模块resolve方法将输出路径解析为绝对路径
            path: path.resolve(__dirname, "../dist/js"), //将js文件打包到dist/js的目录
            filename: "main.js" 
        },
        module: {},
        plugins: [
      	  new HtmlWebpackPlugin({
    	    title: 'Custom template',
    	    template: './src/index.html', //指定要打包的html路径和文件名
    	    filename:'../index.html' //指定输出路径和文件名
    	  }),
          new uglifyjs(), //压缩js
        ]
    }

    文件目录:

    index.html不需引入任何js或css,打包后的文件会自动引入,在html的title处填写<%= htmlWebpackPlugin.options.title %>打包后会自动附上new HtmlWebpackPlugin方法里面的title的值。

    展开全文
  • # {extry file}出填写入口文件的路径,本文中就是上述main.js的路径, # {destination for bundled file}处填写打包文件的存放路径 # 填写路径的时候不用添加{} webpack {entry file} {destination for bundled ...
  • webpack和gulp的区别

    万次阅读 2019-08-07 11:08:36
    webpack和gulp的区别是什么? 这是一个前端面试经常会有的面试题,当然也是很多人的疑问,那下面就简单说一下吧! Gulp: gulp 致力于 自动化和优化 你的工作流,它是一个自动化你开发工作中 痛苦又耗时任务 的工具...
  • webpack打包(二)(含面试)

    千次阅读 2018-06-02 17:25:29
    chunkkey:'' // 使用chunkkey扩展性好,清楚的知道入口文件对应的key }2.处理CSS引入csscss-loader提取css文件extract-text-webpack-plugin3.本地开发服务器:webpack-dev-server路径重定向,支持https,浏览器中...
  • 教你如何使用webpack打包你的项目

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

    万次阅读 2018-07-19 15:58:43
    非script标签的形式引入JQuery。 安装JQuery: 先安装加载器expose-loader,用于将插件暴露到全局中供其他模块使用: npm i expose-loader --save 安装JQuery: ...1.第一种方法:在打包入口文件...
  • 彻底解决webpack打包

    千次阅读 2018-06-13 09:47:41
    前端开发一个crm项目的时候,因为项目内容比较庞大,导致webpack编译和打包都巨慢,实在是影响开发效率,所以着手升级webpackwebpack4-es6-react webpack4-es6-react是一个全新的基于webpack4、react16、es6...
  • 使用webpack合并js文件

    万次阅读 2017-07-11 17:35:54
    Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。在代码实践之前,先说一写webpack的基础知识。1、为什要使用WebPack现今的很多网页...
  • webpack基本打包配置流程

    千次阅读 2017-12-13 12:59:57
    项目搭建以及webpack打包配置流程 创建文件夹EC(文件夹和文件名根据需求自定义)在EC文件夹下新建文件夹APP在APP文件夹下新建入口文件index.js 和运行该入口文件的index.html文件在APP文件夹下新建两个js文件:a...
  • 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) ...
  • Vue学习笔记之Webpack的使用

    千次阅读 多人点赞 2020-08-02 19:51:40
    一、webpack的使用: 项目结构: ...PS:只需打包入口函数(只打包main.js),其他依赖类会自动打包 有两种开发模式CommonJS、ES6两种模块化开发: ES6: 引用: 重新打包后运行情况:
  • webpack的安装和基本使用

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

    万次阅读 多人点赞 2019-10-13 14:00:46
    写这篇文章的初衷在于,虽然网络上关于webpack的教程不少,但是大多已经过时,由于webpack版本更新后许多操作变化很大,很多教程的经验已经不适合。当我们使用npm安装webpack时,若不指定webpack的版本,将默认安装...
  • 1.安装依赖webpack项目依赖npm和nodejsbrew install npm npm install node检查版本npm -v node -v2.安装webpack1.全局安装:具体位置如下图npm install webpack -g2.局部安装:当前项目中安装,比如桌面有个webpack...
  • Webpack学习

    千次阅读 2020-10-19 09:24:00
    Webpack的介绍和使用:基本使用、打包 css 和图片文件、 测试环境下自动编译打包、使用 webpack 插件
  • webpackwebpack-dev-server的区别

    千次阅读 2019-12-31 11:26:33
    webpack webpack-dev-server ...进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。 每个依赖项随即被处理,最后输出到output字段指定的文件中 main.js引入child1.js、chi...
  • Webpack打包

    万次阅读 2020-05-17 00:43:54
    模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。 为什么使用webpack 现在是...
1 2 3 4 5 ... 20
收藏数 12,796
精华内容 5,118
关键字:

webpack 入口文件更新自动打包