首页 / WEBPACK / webpack使用六

webpack使用六

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了webpack使用六，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3983字，纯文字阅读大概需要6分钟。

内容图文

插件（Plugins）

插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。

Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。

使用插件的方法

            const webpack = require(‘webpack‘);

module.exports = {
...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin(‘版权所有，翻版必究‘)
    ],
};

通过这个插件，打包后的JS文件显示如下

技术分享

这就是webpack插件的基础用法了，下面给大家推荐几个常用的插件

HtmlWebpackPlugin

这个插件的作用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）。

安装

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

这个插件自动完成了我们之前手动做的一些事情，在正式使用之前需要对一直以来的项目结构做一些更改：

移除public文件夹，利用此插件，index.html文件会自动生成，此外CSS已经通过前面的操作打包到JS中了。
在app目录下，创建一个index.tmpl.html文件模板，这个模板包含title等必须元素，在编译过程中，插件会依据此模板生成最终的html页面，会自动添加所依赖的 css, js，favicon等文件，index.tmpl.html中的模板源代码如下：

                
                    <!
                    DOCTYPE html
                    >
                    <
                    html 
                    lang
                    ="en"
                    >
                    <
                    head
                    >
                    <
                    meta 
                    charset
                    ="utf-8"
                    >
                    <
                    title
                    >Webpack Sample Project</title></head><body><div id=‘root‘></div></body></html>

　　3.更新webpack的配置文件，方法同上,新建一个build文件夹用来存放最终的输出文件

                const webpack = require(‘webpack‘);
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);

module.exports = {
    entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    devtool: ‘eval-source-map‘,
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin(‘版权所有，翻版必究‘),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
        })
    ],
};

再次执行npm start你会发现，build文件夹下面生成了bundle.js和index.html。

技术分享

Hot Module Replacement

Hot Module Replacement（HMR）也是webpack里很有用的一个插件，它允许你在修改组件代码后，自动刷新实时预览修改后的效果。

在webpack中实现HMR也很简单，只需要做两项配置

在webpack配置文件中添加HMR插件；
在Webpack Dev Server中添加“hot”参数；

不过配置完这些后，JS模块其实还是不能自动热加载的，还需要在你的JS模块中执行一个Webpack提供的API才能实现热加载，虽然这个API不难使用，但是如果是React模块，使用我们已经熟悉的Babel可以更方便的实现功能热加载。

整理下我们的思路，具体实现方法如下

Babel和webpack是独立的工具
二者可以一起工作
二者都可以通过插件拓展功能
HMR是一个webpack插件，它让你能浏览器中实时观察模块修改后的效果，但是如果你想让它工作，需要对模块进行额外的配额；
Babel有一个叫做react-transform-hrm的插件，可以在不对React模块进行额外的配置的前提下让HMR正常工作；

还是继续上例来实际看看如何配置

                    const webpack = require(‘webpack‘);
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);

module.exports = {
    entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    devtool: ‘eval-source-map‘,
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true,
        hot: true
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin(‘版权所有，翻版必究‘),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
        }),
        new webpack.HotModuleReplacementPlugin()//热加载插件
    ],
};

安装react-transform-hmr

                    npm install --save-dev babel-plugin-react-transform react-transform-hmr

配置Babel

                    // .babelrc
{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
    "plugins": [["react-transform", {
       "transforms": [{
         "transform": "react-transform-hmr",
         
         "imports": ["react"],
         
         "locals": ["module"]
       }]
     }]]
    }
  }
}

现在当你使用React时，可以热加载模块了,每次保存就能在浏览器上看到更新内容。

原文：http://www.cnblogs.com/ldlx-mars/p/7748649.html

内容总结

以上是互联网集市为您收集整理的webpack使用六全部内容，希望文章能够帮你解决webpack使用六所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1152720.html

来源：【匿名】

【上一篇】react+webpack+redux+router+ant 构架react开发环境（1）【下一篇】关于extract-text-webpack-plugin的使用及安装

更多 ►

【webpack使用六】教程文章相关的互联网学习教程文章

webpack4对第三方库css，项目全局css和vue内联css文件提取到单独的文件(二十二)【代码】【图】

vuecli2.x webpack3.x升级webpack5.37.0【代码】【图】

随着项目的页面越来越多体积越来越大，dev构建速度和pro打包速度越来越慢，然后就抽时间对项目进行了webpack升级来提升一下速度升级过程中遇到了很多的坑，基本都是plugin和loader升级后的一些用法问题，花了一个晚上和一个上午时间，过程很痛苦，但是看到速度的大幅度提示，还是很开心的先上图看一下对比效果 webpack3 dev构建 webpack3 pro打包 webpack5 dev构建提升60% webpack5 pro 构建提升23% 看的处理效果还是很不错的...

webpack react 配置【代码】

安装Webpack1. npm i -D 是npm install --save-dev 的简写，是指安装模块并保存到package.json的devDe pendencies，npm i -D webpacknpm init -ynpm install webpack webpack-dev-server --save-devnpm install --save-dev webpack-cli -g2.全局安装 npm i -g webpack运行在项目根目录下对应的命令行里通过node rnodules/.bin/webpack 运行Webpack 的可执行文件。在Npm Script 里定义的任务会优先使用本项目下的Webpack创建src 文件...

简单配置webpack自动刷新浏览器【代码】

文档地址 http://webpack.github.io/docs/usage.html首先全局安装webpack(我这里使用的是淘宝的cnpm)cnpm install webpack检查一下是否安装完毕，查看版本号webpack -h简历package.json文件npm init 一直enter就可以了然后再本地安装一次webpackcnpm install webpack --save-dev新建webpack.config.jsmodule.exports = {entry: ‘./js/app.js‘, //入口文件output: {path: ‘./build‘, //打包好的文件夹filename: ‘main‘ /...

基于webpack的React项目搭建(二)【代码】【图】

前言前面我们已经搭建了基础环境，现在将开发环境更完善一些。devtool在开发的过程，我们会经常调试，so，为了方便我们在chrome中调试源代码，需要更改webpack.config.js，然后启动webpack-dev-server。完成之后在chrome浏览器中打开debug，点击Sources选项，即可看见提示，继而输入你想查看的源文件名即可显示该文件源代码，如果你觉得某处代码有问题，对应行号打上断点即可调试。...... module.exports = {devtool: ‘cheap-modu...

ERROR in [copy-webpack-plugin] unable to locate "D:/xxx/xxx/xxx"【代码】【图】

vue打包的时候npm run build报错ERROR in [copy-webpack-plugin] unable to locate "D:/xxx/xxx/xxx"这表示这个路径出现了错误，找不到正确路径在你的项目文件夹中找一找有没有这个路径的文件，没有的话，按这个路径把缺失的相应的文件放到里面再重新打包就行了例如我打包一直报错ERROR in [copy-webpack-plugin] unable to locate ‘D:\trainh5vue\Content‘ at ‘D:\trainh5vue\Content‘找了找发现有两样式文件一直没有打包进去...

webpack初识一【代码】【图】

webpack通过逆注入的形式来构建应用，页面正常的流程是先解析html然后在解析内部的资源(js, css, img等)。webpack是以配置项entry内的资源为入口。webpack在编译时，正常情况下，会先对entry中的资源进行编译处理，然后再执行插件，最后执行loader。但是entry的属性值在特定目录时，webpack不会对其编译。相当于js中的保留关键字。目前测试下来的特定目录为:[‘./src/**/*‘, ‘./test/**/*‘]如图：webpack并未先编译./test/aaa.j...

vue----webpack模板----组件复用解决方法【代码】

组件复用当前组件被复用（没有被销毁或者创建）的时候，路径会发生改变，但是，值不会发生改变因为：created(){}接收值，但是created只创建一次，在create中接收路径传来的值，所以接收到的值不会发生改变解决方法：监听路由的变化 $route()使用场景：当一个组件被复用的时候，虽然路由发生变化，但页面上的数据不会发生变化　　比如：　　　　从列表页list点击商品，进入商品详情页details查看商品的详细信息,当点击商品时，跳...

webpack(二）根据模板生成简单的html文件【代码】

（一）使用webpack 根据模板生成HTML，首先需要安装插件 html-webpack-plugin。在工程文件夹安装插件命令如下：npm install html-webpack-plugin --save-dev (二）　　新建 webpack.config.js，名称可以更改，更改后运行时，需指定配置文件名称。　　例如，配置文件名为 my.webpack.config.js,　则需要在package.json 文件中，在scripts 处添加如下代码："scripts": {"webpack": "webpack --config webapack.config.js --progr...

webpack基础【代码】

webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。安装在node环境下，通过npm安装webpacknpm install webpack -g启动webpackwebpack // 执行一次开发的编译 webpack -p // 针对发布环境编译(压缩代码) webpack -w // 进行开发过程持续的增量编译(飞快地!) webpack -d // 生成map映射文件，告知哪些模块被最终打包到哪里了 webpack --conf...

webpack 使用别名（resolve.alias）解决scss @import相对路径导致的问题【代码】【图】

webpack.conf.js 中 resolve.alias 配置resolve: {extensions: [‘.js‘, ‘.vue‘],alias: {‘@‘: path.resolve(__dirname, ‘src‘),‘@scss‘: path.resolve(__dirname, ‘src‘, ‘scss‘),} }配置了resolve.alias 后，在js中我们可以这样用// 原本这样写 import hongAlert from ‘./../src/scss/icon.scss‘// 现在可以这样写 import hongAlert from ‘@scss/icon.scss‘在scss中需要这样写，注意是~@// 原本这样写 @import ...

webpack性能优化-实战【代码】

题外话：年初项目重构上线，项目技术栈使用vue+webpack，测试执行整个打包流程需要10分钟，同时又因涉及三个渠道，部署好环境就需半个小时，这严重延误了上线进度，因此提高webpack构建效率，成为了改善团队开发效率的关机之一。正文：一.抽离项目配置文件因为项目前后端分离，需要配置接口地址，当时没有考虑到分离配置文件，造成每次需要打包三次。基本思路(百度)：把配置信息挂在window下，然后写在一个不打包的js中，页面单独...

webpack4从零配置搭建简单的React16开发环境【代码】【图】

写在最前暑假想要学习React, 发现React官网上的没有说明如何搭建React开发环境, 网上找的很多都是基于webpack3的, 或者直接使用脚手架, 所以趁着放假, 就稍微学了下webpack, 开始搭建自己的React项目. 第一次写博客, 如有错误, 请指出, 谢谢!之后也会继续更新从零搭建React全家桶系列, react+react-router+redux+es6. 希望大家多多支持.说明开发环境是windows 10技术栈版本node 10.3.0npm 6.1.0webpack 4.16.1react 16.4.1babel-co...

webpack的学习

什么是webpack? 他有什么优点？首先对于很多刚接触webpack人来说，肯定会问webpack是什么？它有什么优点？我们为什么要使用它？带着这些问题，我们来总结下如下： Webpack是前端一个工具，可以让各个模块进行加载，预处理，再进行打包，它能有Grunt或Gulp所有基本功能。优点如下：支持commonJS和AMD模块。支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写...

Webpack如何配置sourceMap【代码】

前言：在写这篇文章之前，我必须要吐槽一下webpack了。特别喜欢更新版本，更新就算了，文档还跟不上。文档真的让人迷惑了，大爷的。背景：由于我正在写sourceMap反向定位源码的功能，所以最近需要使用到webpack的source-map配置。因为公司webpack的版本有2.0和4.0的，所以在做sourceMap配置的时候，真的是花费了很大的气力。无力吐槽，我们看正文吧 =======================================================================...

WEBPACK - 相关标签

WEBPACK - 最热教程

浅谈webpack打包之后的文件过大的解决方...使用webpack插件html-webpack-plugin实...WebPack配置vue多页面步骤详解【Web】阿里icon图标webpack插件（webp...使用webpack如何实现文件打包在vue-cliwebpack中如何引入jquery（详...使用html-webpack-plugin'入再内存中生...JavaScript反爬笔记（3）_JS进阶（摘要...vue-cli · Failed to download repo vu...vue解决使用webpack打包后keep-alive不...

首页 / WEBPACK / webpack使用六

webpack使用六

内容导读

内容图文

插件（Plugins）

使用插件的方法

HtmlWebpackPlugin

Hot Module Replacement

内容总结

内容备注

内容手机端

【webpack使用六】教程文章相关的互联网学习教程文章

WEBPACK - 相关标签

WEBPACK - 最新教程

WEBPACK - 最热教程