Webpack的基础信息和使用方法

来源:http://www.chinese-glasses.com 作者:Web前端 人气:98 发布时间:2020-03-16
摘要:识别 User Agent,下发不同的 Polyfill 1.后起之秀为何这么受欢迎? webpack之前有gulp、require等构件工具,但仍然会迅速的成为最受欢迎的前端构建工具。主要是因为他在减少http请求和静态文

识别 User Agent,下发不同的 Polyfill

1.后起之秀为何这么受欢迎?

webpack之前有gulp、require等构件工具,但仍然会迅速的成为最受欢迎的前端构建工具。主要是因为他在减少http请求和静态文件体积两方面做的更好,此外还有很多灵活的插件和loader机制。

然后修改vue.config.js配置文件 (vuecli3+版本的配置文件统一在这个文件里修改,如果没有该文件,在根目录新建一个)

Webpack作为非常受欢迎的前端工具,必然有它的厉害之处。所以单独开篇文章记录学习Webpack的使用要点,主要分以下几部分学习:

  • 后起之秀为何这么受欢迎?

分析整个打包总耗时每个plugin和loader的耗时情况


如今,webpack 毫无疑问是前端构建领域里最耀眼的一颗星,无论你前端走哪条路线,都需要有很强的webpack 知识。webpack 的基本用法这里就不展开讲了。主要探讨一下如何提高 webpack 的打包速度。这篇文章以 vue cli3.0+,webpack4.0+,nodejs10.0+ 这几个版本为例。

2.webpack的安装和基本工作流程

![](https://upload-images.jianshu.io/upload_images/1292864-74502f3f6d5e63ca.png)
  • 工作流程示例:
    创建moduleOne.js

    console.log('Module one')
    

创建moduleTwo.js

  console.log('Module two')

入口文件entry.js

  require('./module-one.js');
  require('./module-two.js');

使用webpack打包命令生成bundle.js

webpack js/entry.js bundle.js

在客户端客户端页面index.html中引入bundle.js

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Webpack learning</title>
    </head>
    <body>
        <h1>Webpack is nice!</h1>
        <script src="bundle.js"></script>
    </body>
</html>

这样最简单的打包示例就完成了。

实际项目中一般不直接在命令行中配置入口和出口文件来进行打包,而是通过配置文件webpack.config.js来控制,OK!我们创建一个webpack.config.js文件。

module.exports = {
  devtool:"sourcemap",
  entry:"./js/entry.js",
  output: {
      filename: "bundle.js"
  }
};

其中devtool声明文件映射关系、entry和output分别声明入口和出口文件。然后通过webpack命令直接打包。

bogon:webpack-learning chengyanfang$ webpack
Hash: 2ff33cd9e057fd7d476f
Version: webpack 2.2.1
Time: 92ms
      Asset     Size  Chunks             Chunk Names
      bundle.js  3.04 kB       0  [emitted]  main
      bundle.js.map  3.37 kB       0  [emitted]  main
      [0] ./js/module-one.js 73 bytes {0} [built]
      [1] ./js/module-two.js 73 bytes {0} [built]
      [2] ./js/entry.js 104 bytes {0} [built]

此时工程中除了生成bundle.js 还生成了 bundle.js.map。

接下来引用jquery来扩展moduleOne的功能,进入项目目录:

npm init  //初始化npm
npm install jquery --save-dev  //引入jquery

然后修改moduleOne.js

//声明jquery的$变量
var $ = require("jquery");

//执行jquery命令,替换index.html的h1元素内容
$('h1').html('It is real');

然后webpack重新打包测试,顺利完成目标。
此时jquery只是在moduleOne.js中存在,而不是全局存在,这正是webpack的魅力所在。

并行压缩主流有以下三种方案

6.webpack的插件和配置文件的最佳实践

首先获取当前环境变量

  var debug = process.env.NODE_ENV != "production"

然后做如下差异化配置:

  • 线上环境时不需要生成sourcemap

    devtool:debug ? "sourcemap" : null,
    
  • 线上环境时增加一些压缩和优化的插件 (插件列表查询地址)

   plugins:debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    //UglifyJsPlugin混淆作用
    new webpack.optimize.UglifyJsPlugin({mangle:false,sourcemap:false}),
  • 最终的webpack.config.js文件内容
    var debug = process.env.NODE_ENV != "production"

    module.exports = {
        devtool:debug ? "sourcemap" : null,
        entry:"./js/entry.js",
        output: {
            filename: "bundle.js"
        },
        module: {
            loaders:[
                {
                    test:/.css$/,
                    loader:"style-loader!css-loader"        
                },
                {
                    test:/.js$/,
                    loader:"babel-loader",
                    exclude:/node_modules/
                },
                {
                    test:/.vue$/,
                    loader:"vue-loader"
                }
            ]
        },
        plugins:debug ? [] : [
            new webpack.optimize.DedupePlugin(),
            new webpack.optimize.OccurenceOrderPlugin(),
            new webpack.optimize.UglifyJsPlugin({mangle:false,sourcemap:false}),
        ],
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.js'
            }
        }
    };

2.4、使用 polyfill 动态服务

7.webpack的两个分析工具

  • #### Analyse工具

    Analyse工具用来分析整个项目中的引用package及之间关系。使用方式如下:

    首先生成用来分析的stats.json文件到项目目录下:

      webpack --profile --json > stats.json
    

    然后打开 (analyse分析工具)上传stats.json进而查看整个项目的信息。

一、打包分析1.1、速度分析

4.使用Webpack进行vue组件化开发

首先通过npm安装vue相关的loader

npm install vue vue-loader vue-html-loader vue-style-loader vue-template-compiler --save-dev

接着配置webpack.config.js中的loader:

{
    test:/.vue$/,         
    loader:"vue-loader"
}

然后创建heading.vue文件:

 <template>
    <div>
        <h1>Hello {{message}}</h1>
    </div>
 </template>

 <script>
    export default{
        data(){
            return{
                message:'vue.js'
            }
        }
    }
 </script>

然后在entry.js中引入heading.vue

 //vue
import Vue from 'vue'
import Heading from './components/heading.vue';
new Vue({
  el:"#app",
  components : {Heading}
});

之后在index.html中引入Heading组件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack learning</title>
</head>
<body>
    <div id="app">
        <Heading></Heading>
    </div>

    <h1>Webpack is nice!</h1>
    <script src="bundle.js"></script>
</body>
</html>

最后还要配置webpack.config.js 来避免运行时问题,完整配置如下:

module.exports = {
    devtool:"sourcemap",
    entry:"./js/entry.js",
    output: {
        filename: "bundle.js"
    },
    module: {
        loaders:[
            {
                test:/.css$/,
                loader:"style-loader!css-loader"
            },
            {
                test:/.js$/,
                loader:"babel-loader",
                exclude:/node_modules/
            },
            {
                test:/.vue$/,
                loader:"vue-loader"
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.js'
        }
    }
};   

最后webpack打包测试,成功OK!

// 导入速度分析插件const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");// 导入体积分析插件const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;//判断是否为生产环境const isProduction = process.env.NODE_ENV === 'production';//定义 CDN 路径,这里采用 bootstrap 的 cdnconst cdn = { css: [ '' ], js: [ '', '-router/3.1.3/vue-router.min.js', '', '', '', '', ]}// 实例化插件const smp = new SpeedMeasurePlugin();module.exports = { chainWebpack: config = { // 生产环境配置 if (isProduction) { // 生产环境注入 cdn config.plugin('html') .tap(args = { args[0].cdn = cdn; return args; }); } }, configureWebpack: smp.wrap({ module: { rules: [ { test: /.js$/, use: ['thread-loader'] } ] }, plugins: [ new BundleAnalyzerPlugin() ], //生产环境注入 cdn externals: isProduction  { 'vue': 'Vue', 'vuex': 'Vuex', 'vue-router': 'VueRouter', 'axios': 'axios', 'echarts': 'echarts', 'swiper': 'Swiper' } || {} })}
  • webpack的安装和基本工作流程
  • 如何使用loaders
  • 使用Webpack进行vue组件化开发
  • webpack的常用命令行及热加载
  • webpack的插件和配置文件的最佳实践
  • webpack的两个分析工具

接下来在vue.config.js配置文件中使用该loader

3.如何使用loaders

正如上节示例所示,webpack的强大之处在于几乎可以把所有的静态文件打包到一个js文件里。然后他会使用各种loader来解析这个js文件的内容。所以这节主要学习各种loader。

首先,通过npm下载css-loader和style-loader

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

然后,在webpack配置文件中声明,某个类型的文件需要使用某个类型的loader来处理。修改webpack.config.js如下:

module.exports = {
  devtool:"sourcemap",
  entry:"./js/entry.js",
  output: {
      filename: "bundle.js"
  },
  module: {
    loaders:[
        {
            test:/.css$/,
            loader:"style-loader!css-loader"
        }
    ]
  }
};

然后,创建一个style.css文件用于测试:

body{
  background: cornflowerblue;
}

之后在entry.js中把style.css包含进来:

//css
require('../css/style.css');

这样css文件就会通过webpack打包进bundle.js,然后在index.html中引入bundle.js 进而style.css成功渲染index.html的body....(瞅瞅我这英文讲的)。重新打包测试,成功OK!

接下来使用有关es6种关于babel的loader:

npm install babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime --save-dev

然后在webpack.config.js中增加babel的loader配置(使得除node_modules下的js文件之外,其余全部使用ES6的语法处理js文件):

{
    test:/.js$/,
    loader:"babel-loader",
    exclude:/node_modules/
}

同时需要在更目录增加.babelrc文件进行babel设置:

{
  presets: ['es2015','stage-0'],
  plugins: ['transform-runtime']
}

然后webpack打包测试,成功OK!

二、打包优化2.1、多进程多实例构建,资源并行解析

5.webpack的常用命令行及热加载

优化及文件压缩命令,对于线上部署时非常有用

webpack -p

使用watch机制,实时监控源码修改,而不需要每次都执行webpack;一次执行之后,每次更新代码只需要刷新下浏览器即可。

webpack -w

更进一步,webpack还提供修改代码后不需要刷新浏览器就可以实时查看效果的热更新技术,通过以下步骤进行配置:

首先,全局安装webpack-dev-serve

npm install webpack-dev-server -g

然后进入到项目目录再次执行
npm install webpack --save-dev

最后执行以下命令启动localhost服务器,并且设置flag为热加载

webpack-dev-server --inline --hot

打开http://localhost:8080/,修改代码测试,成功OK!

转载请注明出处:作者:TSY,个人空间:

安装插件依赖

npm i -D webpack-bundle-analyzer

我们的目的是优化打包速度,那肯定需要一个速度分析插件,此时speed-measure-webpack-plugin就派上用场了。它的作用如下:

运行打包命令之后,可以看到,打包总耗时为2min,51.99s

// 导入速度分析插件const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");// 导入体积分析插件const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;// 实例化速度分析插件const smp = new SpeedMeasurePlugin();module.exports = { configureWebpack: smp.wrap({ plugins: [ // 实例化体积分析插件 new BundleAnalyzerPlugin() ] })}

1.2、体积分析

分析完打包速度之后,接着我们来分析打包之后每个文件以及每个模块对应的体积大小。使用到的插件为webpack-bundle-analyzer,构建完成后会在8888端口展示大小。

首先,安装插件

// 导入速度分析插件const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");// 导入代码压缩插件const TerserPlugin = require("terser-webpack-plugin");// 导入体积分析插件const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;//判断是否为生产环境const isProduction = process.env.NODE_ENV === 'production';//定义 CDN 路径,这里采用 bootstrap 的 cdnconst cdn = { css: [ '' ], js: [ '', '-router/3.1.3/vue-router.min.js', '', '', '', '', ]}// 实例化插件const smp = new SpeedMeasurePlugin();module.exports = { chainWebpack: config = { // 生产环境配置 if (isProduction) { // 生产环境注入 cdn config.plugin('html') .tap(args = { args[0].cdn = cdn; return args; }); } }, configureWebpack: smp.wrap({ module: { rules: [ { test: /.js$/, use: ['thread-loader'] } ] }, plugins: [ new BundleAnalyzerPlugin() ], //生产环境注入 cdn externals: isProduction  { 'vue': 'Vue', 'vuex': 'Vuex', 'vue-router': 'VueRouter', 'axios': 'axios', 'echarts': 'echarts', 'swiper': 'Swiper' } || {}, optimization: { minimizer: [ new TerserPlugin({ parallel: 4 }) ] } })}
// 导入速度分析插件const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");// 实例化插件const smp = new SpeedMeasurePlugin();module.exports = { configureWebpack: smp.wrap({ module: { rules: [ { test: /.js$/, use: ['thread-loader'] } ] } })}
npm i -D thread-loader
!DOCTYPE htmlhtml lang="zh"head meta charset="utf-8" meta http-equiv="X-UA-Compatible" content="IE=edge" meta name="viewport" content="width=device-width,initial-scale=1.0" !-- 使用 CDN 的 CSS 文件 -- % for (var i in htmlWebpackPlugin.options.cdn  htmlWebpackPlugin.options.cdn.css) { % link href="%= htmlWebpackPlugin.options.cdn.css[i] %" rel="stylesheet" % } %/headbody noscript strongWe're sorry but eye-admin doesn't work properly without JavaScript enabled. Please enable it to continue./strong /noscript div /div !-- built files will be auto injected -- !-- 使用 CDN 的 JS 文件 -- % for (var i in htmlWebpackPlugin.options.cdn  htmlWebpackPlugin.options.cdn.js) { % script src="%= htmlWebpackPlugin.options.cdn.js[i] %"/script % } %/body/html

本文由10bet发布于Web前端,转载请注明出处:Webpack的基础信息和使用方法

关键词:

上一篇:没有了

下一篇:没有了

最火资讯