webpack 在静态资源后面加版本 - CSDN
精华内容
参与话题
  • webpack 静态资源合并

    千次阅读 2018-12-14 15:21:46
    趁工作之余从零构建了一个webpack4.x多页面... Module:模块, Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。 Chunk:代码块,一个 Chunk 由多个模块...

    趁工作之余从零构建了一个webpack4.x多页面应用程序。过程中也遇到一些坑,就记录下来了。

    webpack核心概念

    1. Entry:入口,Webpack 执行构建的第一步将从 Entry 开始。
    2. Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
    3. Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。
    4. Loader:模块转换器,用于把模块原内容按照需求转换成新内容。
    5. Plugin:扩展插件,在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
    6. Output:输出结果,在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。
    7. 项目的运行主要围绕的就是这几大块

    首先看一下构建后目录

    ?

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    ├── build

    │ ├── webpack.base.conf.js

    │ ├── webpack.dev.conf.js

    │ ├── webpack.prod.conf.js

    │ ├── webpack.rules.conf.js

    ├── src

    │ ├── css

    │ ├── js

    │ ├── images

    │ ├── assets

    │ ├── pages

    │ │ ├── index

    │ │ │ ├── index.html

    │ │ │ ├── index.js

    │ │ │ └── index.scss

    │ │ ├── login

    │ │ │ ├── index.html

    │ │ │ ├── index.js

    │ │ │ └── index.scss

    1.多页面的入口文件

    修改 webpack.base.conf.js代码

    ?

    1

    2

    3

    4

    5

    entry: {

      // 多入口文件

      index: ['./src/pages/index/index.js',],

      login: './src/pages/login/index.js',

     },

    2.配置开发服务器

    ?

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    npm install webpack-dev-server --save-dev

    //修改 webpack.dev.conf.js代码

     

    devServer: {

     contentBase: path.join(__dirname, "../dist"),

     publicPath:'/',

     host: "127.0.0.1",

     port: "8089",

     overlay: true, // 浏览器页面上显示错误

     // open: true, // 开启自动打开浏览器

     // stats: "errors-only", //stats: "errors-only"表示只打印错误:

     hot: true // 开启热更新

    },

    //修改package.json

    scripts: {

     "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.conf.js",

     "build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js",

     "server": "live-server ./ --port=8888"

    },

    3.配置loader

    ?

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    {

     test: /\.(css|scss|sass)$/,

     // 不分离的写法

     // use: ["style-loader", "css-loader",sass-loader"]

     // 使用postcss不分离的写法

     // use: ["style-loader", "css-loader", sass-loader","postcss-loader"]

     // 此处为分离css的写法

     /*use: extractTextPlugin.extract({

      fallback: "style-loader",

      use: ["css-loader", "sass-loader"],

      // css中的基础路径

      publicPath: "../"

     })*/

     // 此处为使用postcss分离css的写法

     use: extractTextPlugin.extract({

      fallback: "style-loader",

      use: ["css-loader", "sass-loader", "postcss-loader"],

      // css中的基础路径

      publicPath: "../"

     

     })

    },

    {

     test: /\.js$/,

     use: ["babel-loader"],

     // 不检查node_modules下的js文件

     exclude: "/node_modules/"

    }, {

     test: /\.(png|jpg|gif)$/,

     use: [{

      // 需要下载file-loader和url-loader

      loader: "url-loader",

      options: {

       limit: 5 * 1024,//小于这个时将会已base64位图片打包处理

       // 图片文件输出的文件夹

       outputPath: "images"

      }

     }]

    }

    4.从js中分离css

    ?

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    npm install extract-text-webpack-plugin --save-dev

    //这个插件在webpack4.x 运行时会有点问题,后面会提到

    //修改 webpack.base.conf.js代码

    // 分离css插件参数为提取出去的路径

    new extractTextPlugin({

     filename: 'css/[name].[hash:8].min.css',

    }),

    5.处理css3属性前缀,消除冗余的css代码并压缩css

     

    //属性自动加前缀

    npm install postcss-loader --save-dev

    //在根目录新建postcss.config.js

    module.exports = {

     plugins: [

      require('autoprefixer')//自动添加css前缀

     ]

    };

    //loader里加入postcss

    {

     test: /\.(css|scss|sass)$/,

     // 此处为使用postcss分离css的写法

     use: extractTextPlugin.extract({

      fallback: "style-loader",

      use: ["css-loader", "sass-loader", "postcss-loader"],

      // css中的基础路径

      publicPath: "../"

     

     })

    }

    //修改package.json 加入css要兼容浏览器版本的代码

    "browserslist": [

     "defaults",

     "not ie < 11",

     "last 2 versions",

     "> 1%",

     "iOS 7",

     "last 3 iOS versions"

    ]

    //消除冗余css代码 使用glob模块去匹配文件所以还要安装glob模块

    npm install purifycss-webpack --save-dev

    new purifyCssWebpack({

     paths: glob.sync(path.join(__dirname, "../src/pages/*/*.html"))

    }),

    //压缩css

    npm install optimize-css-assets-webpack-plugin --save-dev

    //压缩css

    //修改 webpack.prod.conf.js代码

    new OptimizeCSSPlugin({

     cssProcessorOptions: {

      safe: true

     }

    }),

    5.清空打包目录

    ?

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    npm install clean-webpack-plugin --save-dev

    //修改 webpack.prod.conf.js代码

    //删除dist目录

    new cleanWebpackPlugin(['dist'], {

     root: path.resolve(__dirname, '../'), //根目录

     // verbose Write logs to console.

     verbose: true, //开启在控制台输出信息

     // dry Use boolean "true" to test/emulate delete. (will not remove files).

     // Default: false - remove files

     dry: false,

    }),

    6. 压缩js

    ?

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    npm install uglifyjs-webpack-plugin --save-dev

    //修改 webpack.prod.conf.js代码

    //上线压缩 去除console等信息webpack4.x之后去除了webpack.optimize.UglifyJsPlugin

    //https://github.com/mishoo/UglifyJS2/tree/harmony#compress-options

    new UglifyJSPlugin({

     uglifyOptions: {

      compress: {

       warnings: false,

       drop_debugger: false,

       drop_console: true

      }

     }

    }),

    7.提取js公共模块

    ?

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    // webpack4里面移除了commonChunksPulgin插件,放在了config.optimization里面,提取js, vendor名字可改

    optimization: {

     splitChunks: {

      cacheGroups: {

       vendor: {

        // test: /\.js$/,

        test: /[\\/]node_modules[\\/]/,

        chunks: "initial", //表示显示块的范围,有三个可选值:initial(初始块)、async(按需加载块)、all(全部块),默认为all;

        name: "vendor", //拆分出来块的名字(Chunk Names),默认由块名和hash值自动生成;

        enforce: true,

       }

      }

     }

    },

    //项目里配置了自动提取node_modules里用到的模块如jquery,也可以在原模板里面通过第三方cdn引入,又是另一种配置了。

    在 webpack.base.conf.js利配置externals后webpack就不会去打包配置模块

    ?

    1

    2

    3

    4

    externals: {

     'jquery': 'window.jQuery'

    },

    //externals就是webpack可以不处理应用的某些依赖库,使用externals配置后,依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。

    8.复制静态资源

    ?

    1

    2

    3

    4

    5

    6

    7

    npm install copy-webpack-plugin --save-dev

    //静态资源输出,将src目录下的assets文件夹复制到dist目录下

    new copyWebpackPlugin([{

     from: path.resolve(__dirname, "../src/assets"),

     to: './assets',

     ignore: ['.*']

    }]),

    9.产出html

    ?

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

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

    //修改webpack.base.conf.js代码

    // 获取html-webpack-plugin参数的方法

    var getHtmlConfig = function (name, chunks) {

     return {

      template: `./src/pages/${name}/index.html`,

      filename: `${name}.html`,

      // favicon: './favicon.ico',

      // title: title,

      inject: true,

      hash: true, //开启hash ?[hash]

      chunks: chunks,//页面要引入的包

      minify: process.env.NODE_ENV === "development" ? false : {

       removeComments: true, //移除HTML中的注释

       collapseWhitespace: true, //折叠空白区域 也就是压缩代码

       removeAttributeQuotes: true, //去除属性引用

      },

     };

    };

    //配置页面

    const htmlArray = [{

      _html: 'index',

      title: '首页',

      chunks: ['vendor', 'index']//页面用到的vendor模块

     },

     {

      _html: 'login',

      title: '登录',

      chunks: ['login']

     },

    ];

    //自动生成html模板

    htmlArray.forEach((element) => {

     module.exports.plugins.push(new htmlWebpackPlugin(getHtmlConfig(element._html, element.chunks)));

    })

    10.性能优化 高大上的可视化分析模块

    ?

    1

    2

    3

    4

    npm install webpack-bundle-analyzer --save-dev

    //修改 webpack.prod.conf.js代码

    new BundleAnalyzerPlugin()

    //npm run build 后会打开一个页面

    cmd-markdown-logo

    通过这个页面可以看到哪些页面是由哪些模块组成的,通过这个可视化页面可以更加方便去定位哪个包臃肿了,然后去优化。

    报错 & 解决办法

    Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

    后来发现webpack4不支持extract-text-webpack-plugin 必须下载next版本安装这个插件

    ?

    1

    npm install extract-text-webpack-plugin@next

    https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/701

    项目源码

    https://github.com/zhouyupeng/webpack4.x_demo

    展开全文
  • 1、如何引入如js,css等文件? 比如我们想引入jQuery文件或者依赖     若是已下载好的jQuery...// 开头引入webpack后面的plugins那里需要 var webpack = require('webpack') // resolve module.export...

    1、如何引入如js,css等文件?
    比如我们想引入jQuery文件或者依赖
       
    若是已下载好的jQuery文件,则这样引入。
    打开webpack.base.conf.js,在relove加入这段代码

    // 在开头引入webpack,后面的plugins那里需要
    var webpack = require('webpack')
    // resolve
    
    module.exports = {
       // 其他代码...
       resolve: {
          extensions: ['', '.js', '.vue'],
          fallback: [path.join(__dirname, '../node_modules')],
          alias: {
              'src': path.resolve(__dirname, '../src'),
              'assets': path.resolve(__dirname, '../src/assets'),
              'components': path.resolve(__dirname, '../src/components'),
    
              // webpack 使用 jQuery,如果是自行下载的
              // 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'),
              // 如果使用NPM安装的jQuery
              'jquery': 'jquery' 
          }
       },
    
       // 增加一个plugins
       plugins: [
          new webpack.ProvidePlugin({
              $: "jquery",
              jQuery: "jquery"
          })
       ],
    
       // 其他代码...
    }

    这样子就可以正确使用jqeury了。
    引入jQuery后,比如我们想要引入boostrap,在main.js文件开头加入

    import './assets/libs/bootstrap/css/bootstrap.min.css'
    import './assets/libs/bootstrap/js/bootstrap.min'

    也不一定是引入在main.js文件,也可以引入到你想要引用到的组件中。

    !!!有一点需要注意的是经过尝试,要把js、css文件等放在src文件夹中

    jQuery用依赖来引入方法:
    1、首先在pakage.json里加入

    dependencies:{
     "jquery" : "*"//*为号为最新版
    }

    然后在打开这个文件夹中的命令行 npm install 下载依赖。

    2、在webpack.base.conf.js里加入

    var webpack = require("webpack")

    3、在module.exports的最后加入

    plugins: [
     new webpack.optimize.CommonsChunkPlugin('common.js'),
     new webpack.ProvidePlugin({
         jQuery: "jquery",
         $: "jquery"
     })
    ]

    4、然后重启

    npm run dev

    5、在main.js 引入

    import $ from 'jquery'

    那么,为什么必须要把这些文件放在src中呢?

    且听下回分解!

    展开全文
  • 以前一直使用create-react-app这个脚手架进行react开发,后面因为一些自定义的配置,转而使用webpack搭建一套自己的脚手架。但是使用webpack打包之后发现,纳尼?怎么文件这么大??? 于是研究了一下如何处理...

    以前一直使用create-react-app这个脚手架进行react开发,后面因为一些自定义的配置,转而使用webpack搭建一套自己的脚手架。但是在使用webpack打包之后发现,纳尼?怎么文件这么大???
    于是研究了一下如何处理webpack打包之后文件太大的情况,简单记录下来。

    首先配置全局变量

    首先,通过指定环境,告诉webpack我们当前处于production环境中,要按照production的方式去打包。

     //指定环境,将process.env.NODE_ENV环境与library关联
     new Webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify('production'),
     }),

    优化devtool中的source-map.

    dev-tool提供了很多种选项,用来增强我们debug的能力,我们熟知的有:source-map,inline-source-map,cheap-source-map等等。详细的用法可以参考
    Devtool官方文档
    Devtool配置对比
    webpack sourcemap 选项多种模式的一些解释
    https://webpack.github.io/docs/configuration.html#devtool
    如果你的文件在打包之后突然变成好几M,那么不用想,肯定是因为source-map的原因。source-map在开发阶段确实很好用,调试起来很方便,但是在生产环境下就没必要部署了。
    建议在prod环境下关闭source-map

    剥离css文件,单独打包

    安装webpack插件extract-text-webpack-plugin
    npm install extract-text-webpack-plugin --save-dev
    使用方法:

    plugins:[
     new ExtractTextPlugin('static/css/styles.[contenthash].css'),
    ]

    这里使用了contenthashwebpack会根据内容去生成hash值。

    使用UglifyJSPlugin压缩。

    通过UglifyJSPlugin可以压缩我们的*.js文件。
    安装方法: npm install uglifyjs-webpack-plugin --save-dev
    用法:
    UglifyJSPlugin详细用法

    const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
    module.exports = {
      plugins: [
         new UglifyJSPlugin({
                parallel: 4,
                uglifyOptions: {
                    output: {
                        comments: false,
                        beautify: false,
                    },
                    compress: {
                        warnings: false
                    },
                },
                cache: true,
            }),
      ]
    }

    提取公共依赖

    使用CommonsChunkPlugin插件,将多个js文件进行提取,建立一个独立的文件。这个文件包含一些共用模块,浏这样览器只在刚开始的时候加载一次,便缓存起来供后续使用。而不用每次访问一个新界面时,再去加载一个更大的文件。

     entry:{
        app:'./entry',
        vendor:['react','other-lib'],
     },
     plugins:[
         new Webpack.optimize.CommonsChunkPlugin({
             name: 'vendor',
         }),
     ]

    开启gzip压缩

    我们使用compression-webpack-plugin插件进行压缩。
    安装:npm install compression-webpack-plugin --save-dev
    compression-webpack-plugin 详细用法
    使用:

    const CompressionPlugin = require("compression-webpack-plugin");
    plugins:[
    new CompressionPlugin({
         asset: '[path].gz[query]', //目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径,[query] 替换成原查询字符串
         algorithm: 'gzip',//算法
         test: new RegExp(
              '\\.(js|css)$'    //压缩 js 与 css
         ),
         threshold: 10240,//只处理比这个值大的资源。按字节计算
         minRatio: 0.8//只有压缩率比这个值小的资源才会被处理
    })
    ]

    压缩结果:
    这里写图片描述

    这里写图片描述

    开启html压缩,自动添加上面生成的静态资源

    添加插件html-webpack-plugin
    安装: npm install html-webpack-plugin --save-dev
    用法:

    plugins:[
      new HtmlWebpackPlugin({
          title: '',
             template: __dirname + '/../public/index.html',
             minify: {
                 removeComments: true,
                 collapseWhitespace: true,
                 removeRedundantAttributes: true,
                 useShortDoctype: true,
                 removeEmptyAttributes: true,
                 removeStyleLinkTypeAttributes: true,
                 keepClosingSlash: true,
                 minifyJS: true,
                 minifyCSS: true,
                 minifyURLs: true,
             },
             chunksSortMode:'dependency'
         }),
    ]
    展开全文
  • webpack学习笔记

    千次阅读 2015-08-02 17:07:51
    是什么webpack是一个模块打包工具,通过依赖处理模块,并生成那些模块静态资源。 观察上图,webpack把所有的资源(js,css和图片等)都当做是模块——webpack中可以引用css,css中可以嵌入图片dataUrl,对于不同...

    是什么

    webpack是一个模块打包工具,通过依赖处理模块,并生成那些模块静态资源。
    这里写图片描述
    观察上图,webpack把所有的资源(js,css和图片等)都当做是模块——webpack中可以引用css,css中可以嵌入图片dataUrl,对于不同类型的资源,webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系,最后 生成了优化且合并后的静态资源。


    为什么

    当今网站正在变成一个web应用:一个页面包含的javascript代码越来越多,结果客户端存在着大量的代码。通过模块系统划分代码到一个个小模块中,是管理大量代码的有效方式。目前有好几种方式用于实现模块和依赖关系定义:

    • <script>标签

      • 简介:这是最基本的代码模块化方式,这种模块输出方式会暴露接口道一个全局对象,即window,需要通过全局对象来访问依赖的模块。
      • 实例:

        <script src="module1.js"></script>
        <script src="module2.js"></script>
        <script src="libraryA.js"></script>
        <script src="module3.js"></script>
      • 缺点
        • 不同模块容易发生 冲突
        • 加载顺序依赖script标签的顺序
        • 在一个大项目中,script标签列表可能变得很长,难以管理
    • CommonJS

      • 简介:CommonJS使用同步的require方法加载依赖模块——模块可以通过给exports对象绑定属性或者给module.exports赋值来定义输出,
      • 实例:

        require("module");
        require("../file.js");
        exports.doStuff = function() {};
        module.exports = someValue;
      • 优点
        • 服务端模块可以重用?
        • 这种方式开发的模块有很多(NPM)
        • 非常简单,很容易使用
      • 缺点
        • 阻塞式的调用不适用于网络(网络请求是异步的)
        • 不能并发请求多个模块
      • 实现
    • AMD

      • 简介:AMD是异步版本的模块CommonJS
      • 实例:

        require(["module", "../file"], function(module, file) { /* ... */ });
        define("mymodule", ["dep1", "dep2"], function(d1, d2) {
            return someExportedValue;
        });
      • 优点
        • 实现了异步请求方式
        • 并行加载多个模块
      • 缺点
        • 代码读写起来比较吃力
        • 看起来像个变通方案
      • 实现
    • ES6

      • 简介:EcmaScript6给Javascript增加了一些语法,形成了另外一种模块系统
      • 实例:

        import "jquery";
        export function doStuff() {}
        module "localModule" {}
      • 优点
        • 静态分析很简单?
        • ES标准,不会过时

    模块确定了,要在客户端执行,必须从服务器传输到客户端。以下是两种极端的传输方式:

    • 一个请求一个模块
      • 优点:只传输请求的模块
      • 缺点:多个模块需要多次请求,影响性能,应用启动慢
    • 一次请求所有模块
      • 优点:较少的请求消耗
      • 缺点:不需要的模块也会被传输到客户端

    上面两种模块加载方式比较极端,我们需要一个能够更加灵活地传输模块的方法。当在编译所有模块的时候,将整个系统划分成多个更小的模块集。各个模块集不会一开始就加载进来,只有在需要的时候才加载,所以初始化的时候并没有包含所有的模块代码。模块集的划分点取决于开发者,例如按功能划分,将该模块依赖的一个个模块当做一个模块集,当访问系统某项功能时,一次请求加载该项功能的模块集。

    前面讨论完关于模块的定义与加载,我们发现为什么只提到了Javascript的模块系统,而前段还有许多其他的静态资源需要加载,如:样式表、图片、字体和html模板等。我们能不能像javascript一样使用require来加载指定的静态资源,例如:

    require("./style.css");
    require("./style.less");
    require("./template.jade");
    require("./image.png");

    一个大点的项目,都会遇到上面的问题——模块划分和静态资源,目前已有的模块打包工具已经不适用了。而webpack作者曾尝试扩展已有的模块打包工具,但也是无法实现所有的构建目标。
    webpack的目标:

    • 将所有模块划分成一个个子模块集,在需要的时候才加载
    • 保证较低的加载时间
    • 将每一个静态资源都当做一个模块
    • 能够以模块的方式集成第三方库
    • 能够定制模块打包的每一部分
    • 适用于大型项目

    webpack的特性

    • 模块划分
      webpack不仅支持CommonJS——支持同步依赖,而且也支持AMD——支持异步依赖,也是模块划分点,形成一个新的模块集。
    • 加载器
      webpack只能加载本地的Javascript,通过一系列的加载器可以实现不同静态资源的加载。
    • 智能编译
    • 插件系统
      webpack有着丰富的插件系统,大多数内部特性都是基于插件系统。

    安装使用

    安装

    1. 安装node.js——node.js自带有一个模块管理器npm
    2. 安装webpack
      • 全局安装:npm install webpack -g,如果有将npm全局安装路径加入path,则可以直接在命令行输入webpack命令了
      • 本地安装:npm install webpack --save-d,本地安装后的命令行工具在./node_modules/.bin/webpack.cmd,也可以在npm package.json里的scripts里引用webpack

    用法

    除了在命令行界面使使用webpack外,也可以直接在代码中使用webpack。

    • 命令行界面
      • webpack --entry entry.js --output bundle.js
      • webpack --config webpack.config.js
      • webpack --config webpack.config.js -d:开发模式
      • webpack --config webpack.config.js -w:观察模式
      • webpack --config webpack.config.js -p:生成模式
    • node.js-api

      • 简单示例

        var webpack = require("webpack");
        // returns a Compiler instance
        webpack({
            // configuration
        }, function(err, stats) {
            // ...
        });
      • 复杂示例

        var webpack = require("webpack");
        
        // returns a Compiler instance
        var compiler = webpack({
            // configuration
        });
        
        compiler.run(function(err, stats) {
            // ...
        });
        // or
        compiler.watch({ // watch options:
            aggregateTimeout: 300, // wait so long for more changes
            poll: true // use polling instead of native watchers
            // pass a number to set the polling interval
        }, function(err, stats) {
            // ...
        });

    常见问题:

    • webpack命令的--confgi选项是做什么的?
      --config用来指定一个配置文件,代替命令行中的选项,从而简化命令。如果直接执行webpack的话,webpack会在当前目录查找名为webpack.config.js的文件。

    简单示例

    本例展示Hello World!,源代码如下:

    • index.html

      <html>
          <head>
              <meta charset="utf-8">
          </head>
          <body>
              <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
          </body>
      </html>
    • entry.js

      document.write(require("./content.js"));
    • content.js

      module.exports = "Hello World.";

    模块打包及运行:

    1. 执行命令webpack ./entry.js bundle.js,该命令会编译entry.js和content.js,并合并生成一个bundle.js。
    2. 在浏览器中打开index.html,显示:Hello World!.

    除了在webpack命令选项中指定模块入口文件和模块打包生成文件外,可以创建webpack.config.js来配置,具体配置如下代码所示。配置好后,在命令行中直接输入webpack(默认查找配置文件webpack.config.js)或者webpack --config webpack.config.js,这样效果同上面的命令webpack ./entry.js bundle.js

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

    更多关于webpack.config.js的配置见下文。


    模块详解

    webpack同时支持CommonJS和AMD规范的模块编写方式, Hello World实例已经简单地演示了模块的定义和加载,下面我们开始学习webpack模块相关的api。

    模块定义

    • module.exports

      • 简介:CommJS规范的模块定义,module.exports指定的对象作为模块的输出,没有指定的话默认返回一个新对象,即{}。
      • 实例:

        module.exports = function doSomething() {
            // Do something
        };
      • 总结:在加载module.exports格式定义的模块时,模块返回的是module.exports指定的对象
      • 注意点:不可以在异步函数中使用module.exports
    • exports

      • 简介:CommonJS规范的模块定义,exports是被输出的对象,如果已经指定了module.exports,则exports会被忽略
      • 实例:

        exports.someValue = 42;
        exports.anObject = {
            x: 123
        };
        exports.aFunction = function doSomething() {
            // Do something
        };
    • export label

      • 简介:Labeld模块定义格式
      • 实例:

        export: var answer = 42;
        export: function method(value) {
          // Do something
        };
      • 注意点:在异步函数中使用可能得不到想要的效果
    • define

      • 简介:AMD规范的模块定义
      • 语法:
        • define(value: !Function)
          • value 非函数值
        • define([name: String], [dependencies: String[]], factoryMethod: function(...))
          • name String 可选参数,表示模块名
          • dependencies String[] 可选参数,依赖的模块名数组
          • factoryMethod function 必填参数,该函数要求有个返回值,作为模块的输出
      • 示例

        • define with value

          define({
              answer: 42
          });
        • define with factory

          define(["jquery", "my-module"], function($, myModule) {
              // Do something with $ and myModule.
              // Export a function
              return function doSomething() {
                  // Do something
              };
          });
      • 总结:
        • define没有指定模块名称的时候,默认使用模块所在文件路径和名称作为模块名称,通常推荐使用这个名称就行了,不要再自己指定模块名称。
        • define函数可以指定依赖的模块,需要注意的是这些模块是同步加载的——模块本身和dependencies模块在同一个模块集里,即,webpack构建生成后放到同一个文件里。
      • 注意点:不能在异步函数中使用

    模块加载

    • require CommonJs
      • 简介:CommonJS规范的require,同步加载指定的模块。webpack编译器会确保客户端执行到这行代码的时候,依赖的模块已经可用,无需向服务器发送请求——实际上webpack就是把需要加载的模块代码和require合并到同一文件里了,所以无需再发送请求获取模块了。
      • 语法:require(dependency: String)
      • 参数
        • dependency:需要加载的模块名
      • 实例:HellowWorld实例的entry.js中存在这样一行代码document.write(require("./content.js"));,这便是一个commonJS规范的require。这里有两个模块:entry.js和content.js,执行webpack却只生成了一个文件bundle.js。
    • require label
      • 简介:同CommonJS,require label也是同步加载指定模块,只是require语法不通罢了——webpack编译器会处理这种语法
      • 语法:require: "dependency"
      • 实例:
      • 备注:注意require label需要借助插件webpack.dependencies.LabeledModulesPlugin,关于插件的使用,后续会介绍,暂时忽略,本节只是关注require label的写法
    • require AMD

      • 简介:AMD规范的require,异步加载指定的模块——在需要的时候(代码执行到AMD require)才会加载依赖的模块。
      • 语法:require(dependencies: String[], [callback: function(...)])
        • dependencies String[] 需要加载的模块名数组
        • callback function 回调函数,在所有模块加载后执行,dependencies指定的模块实例按参数定义的顺序传递给callback
      • 实例:

        // in file.js
        var a = require("a");
        var d = require("d);
        require(["b", "d"], function(b, d) {
          var c = require("c");
        });
        /* This results in:
            * entry chunk
                - file.js
                - a
                - d
            * anonymous chunk
                - b
                - c
        */
      • 总结:require AMD会影响webpack的模块打包结果,前面有提到AMD规范的模块依赖便是模块划分点。上例中执行webpack file.js bundle.js生成bundle.js和1.chunk.js,前者包含模块file.js、a.js和d.js,后者包含模块b.js和c.js。关于require AMD模块划分规则,如下所示:
        • dependencies的模块和callback中以CommonJS require的模块在之前都没有加载过,则webpack会将这些模块合并到同一个模块集里,生成一个chunk.js文件
        • dependencies的模块和callback中以CommonJS require的模块在之前有加载过,则加载过的模块会合并的之前的模块集里,本模块集不会包含这个模块,对于没有加载过的模块webpack处理同上
        • callback中以AMD require加载的模块按新的模块集处理
        • 关于如何判断一个模块是否有加载过?webpack编译器自己会处理模块间的依赖关系来分析,一个比较复杂的例子可以参考CommonsJs, AMD and labeled modules mixed
    • require.ensure

      • 简介:与require AMD类似,也是在需要的时候才会加载相应的模块。但不同的是,require.ensure在模块被下载下来后(模块还没被执行)便立即执行回调函数,另外require.ensure可以指定构建后chunk名,如果之前已有require.ensure指定了该名称,webpack会将这些模块统一合并到一个模块集里。
      • 语法:require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])
      • 实例:

        • 简单示例:

          // in file.js
          var a = require("a");
          require.ensure(["b"], function(require) {
              var c = require("c");
          });
          require.ensure(["d"], function() {
              var e = require("e");
          }, "my chunk");
          require.ensure([], function() {
              var f = require("f");
          }, "my chunk");
          /* This results in:
              * entry chunk
                  - file.js
                  - a
              * anonymous chunk
                  - b
                  - c
              * "my chunk"
                  - d
                  - e
                  - f
          */
          
        • code-splitted-require.context
        • require.ensure VS require AMD
      • 总结:除了require.ensure可以直接指定模块名外,require.ensure与require AMD一致,都可以进行代码划分,规则也一致。
    • require.include

      • 简介: 确保模块是可用的(已经下载到客户端),但没有执行该模块(还没有得到模块输出),可用于优化模块在模块集的位置
      • 语法:require.include(dependency: String)
      • 实例:

        // in file.js
        require.include("a");
        require.ensure(["a", "b"], function(require) {
          // Do something
        });
        require.ensure(["a", "c"], function(require) {
          // Do something
        });
        /* This results in:
           * entry chunk
             - file.js
             - a
           * anonymous chunk
             - b
           * anonymous chunk
             - c
        Without require.include "a" would be in both anonymous chunks.
        The runtime behavior isn't changed.
        */
      • 总结:略

    其他API


    配置详解

    webpack命令提供了一系列的命令选项用于控制模块打包——可通过webpack --help查看这些选项。当需要配置较多的选项时,会使webpack命令变得非常臃肿,如:webpack --entry entry.js --output-path ./build --ouput-file bundle.js。所以webpack提供了一个配置对象来简化项目模块打包,在运行webpack命令的时候,只要指定这个配置对象即可——webpack --config webpack.config.jswebpack.config.js会输出配置对象,例如:

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

    观察上面的配置对象,可以发现配置对象本身就是一个模块,而不是JSON,我们可以在配置对象中随意的使用Javascript代码。除了在命令行界面中直接使用webpack,也可以在js代码中使用webpack api,例如:

    var webpack = require("webpack");
    webpack({
        entry: "./entry.js,
        output: {
            path: "./build",
            filename: "bundle.js"
    }, callback);

    webpack配置对象:

    • context
      webpack处理entry选项时的基础路径(绝对路径),默认值为process.cmd(),即webpack.config.js文件所在路径
    • entry:

      • 简介:webpack模块打包的入口,可以给entry赋字符串类型,数组类型和对象类型的值。
      • 可选值:
        • 字符串:字符串指定的模块在项目程序启动的时候加载
        • 字符串数组:字符串数组指定的所有模块被当做一个模块集,在项目程序启动的时候都会加载,数组最后一个元素作为模块集输出
        • 对象:webpack会打包多个模块集,对象的每个属性名作为模块集的名称,属性值可以是字符串和字符串数组。这个配置可用于实现非单页的程序,程序会有多个启动入口,具体实例可参考multiple entry points
      • 实例:

        {
            entry: {
                page1: "./page1",
                page2: ["./entry1", "./entry2"]
            },
            output: {
                // Make sure to use [name] or [id] in output.filename
                //  when using multiple entry points
                filename: "[name].bundle.js",
                chunkFilename: "[id].bundle.js"
            }
        }
    • output:option是个对象类型的值,option下的每个属性都可能会影响webpack模块打包结果。
    • module:用于配置模块加载插件,后面的章节再具体介绍
    • resolve
    • externals
    • target
    • bail
    • profile
    • cache
    • watch
    • watchOptions.aggregateTimeout
    • watchOptions.poll
    • debug
    • devtool
    • node
    • amd
    • loader
    • recordsPath, recordsInputPath, recordsOutputPath
    • plugins: 插件

    注:不得不说webpack的强大,提供如此之多的配置选项,由于精力有限,后续再慢慢维护完善各个配置选项的说明。


    加载器

    加载器简介

    加载器在webpack中作为资源(不只是javascript,包含其他静态资源)转换器,它本身是个可以运行在node.js环境中的函数。加载器根据参数对源文件进行处理,返回新的源文件,例如:在webpack中使用加载器处理CoffeeScrip和JSX——CoffeeScript是JavaScript的转译语言,JSX是Javascript的超集,都不能直接运行在浏览器中,但加载器会将他们编译成普通的javascript代码。

    加载器的特性:

    • 加载器可以链接使用——多个加载器作用在一个资源上,按编写顺序使用加载器
    • 加载器可以是同步的,也可以是异步的?
    • 加载器运行在nodejs环境里,可以做node.js所能做的一切事情——开发自己的加载器时,可以体会到
    • 加载器可以接受参数,作为加载器的配置来影响加载器对资源的转换
    • 加载器可以通过npm来安装和发布——上面提到了加载器本身就是个运行在node.js环境的函数,所以可以作为node.js包发布在npm上
    • 加载器可以读取webpack的配置
    • 加载器可以结合webpakc的插件使用——插件在后面章节介绍

    安装加载器

    简介中提到了加载器是发布在npm上,作为一个模块使用——输出一个转换函数。所以我们可以通过npm来安装管理加载器,例如:
    npm install xxx-loader --save-dev
    或者
    npm install xxx-loader --save
    作为约定,加载器的命名通常为xxx-loader——xxx是加载器的名字,例如:json-loader。我们既可以使用xxx-loader来引用加载器,也可以直接使用xxx

    加载器使用

    在webpack中使用加载器有三种方式:
    1. 直接在require中引用——不推荐
    2. 在webpack.config.js中配置——推荐
    3. 通过命令选项配置——不推荐

    除了一些特殊情况在require中引用加载器外,我们推荐使用第二种方式来使用加载器——不需要解释,在后面的使用中很容易体会到。

    下面简单介绍下这三种方式的用法:

    • require

      • 说明:可以在require语句(或者define,require.ensure等等)中指定加载器,加载器名称与模块名称通过!分割
      • 实例:

        require("./loader!./dir/file.txt");
        // => uses the file "loader.js" in the current directory to transform
        //    "file.txt" in the folder "dir".
        
        require("jade!./template.jade");
        // => uses the "jade-loader" (that is installed from npm to "node_modules")
        //    to transform the file "template.jade"
        
        require("!style!css!less!bootstrap/less/bootstrap.less");
        // => the file "bootstrap.less" in the folder "less" in the "bootstrap"
        //    module (that is installed from github to "node_modules") is
        //    transformed by the "less-loader". The result is transformed by the
        //    "css-loader" and then by the "style-loader".
      • 总结:第一个require使用了当前目录下的加载器./loader.js;第二个require使用了npm安装的加载器jade-loader;第三个加载器使用了加载器的链接特性,首先会使用less-loader处理源文件,处理后的源文件交给css-loader处理,最后交给style-loader——less-loader转换less源文件为普通的css文件,css-loader处理css文件中的url(由于webpack构建的代码会合并统一放在一个路径下,所以要处理下css引用的资源,否则在实际运行时,无法正确找到资源的位置),style-loader会处理css文件,通过js代码将插入到html页面中
    • 配置文件

      • 说明:学习require直接引用加载器后,我们发现很多资源使用的加载器是一样的。webpack提供了配置选项,让我们可以在配置文件中通过正则表达式来匹配资源,指定某一类资源要使用的加载器
      • 实例:

        {
            module: {
                loaders: [
                    { test: /\.jade$/, loader: "jade" },
                    // => "jade" loader is used for ".jade" files
        
                    { test: /\.css$/, loader: "style!css" },
                    // => "style" and "css" loader is used for ".css" files
                    // Alternative syntax:
                    { test: /\.css$/, loaders: ["style", "css"] },
                ]
            }
        }
    • 命令行选项
      webpack --module-bind jade --module-bind 'css=style!css'

    加载器参数

    加载器提供了一些参数来控制加载器对资源的转换,添加参数的方式类似于url链接中的查询参数。
    - require
    require("url-loader?mimetype=image/png!./file.png");
    - 配置

    `{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }`
    
    或者
    
    ```
    {
        test: /\.png$/,
        loader: "url-loader",
        query: { mimetype: "image/png" }
    }
    ```
    
    • 命令行选项
      webpack --module-bind "png=url-loader?mimetype=image/png"

    加载器库

    webpack有着丰富的加载器实习,可以参考list-of-loaders来查找你需要的加载器。

    简单实例


    插件

    插件简介

    webpack有丰富的插件接口,使得webpack变得更加灵活。webpack内部集成了一些插件,另外在npm上也有发布一些第三方的插件,当然你可以自己根据webpack的接口,开发属于自己的插件。

    内建插件

    webpack本身提供了一些插件供我们使用,如webpack.optimize.DedupePlugin——查找相等或近似的模块,避免在最终生成的文件中出现重复的模块。下面就以webpack.optimize.DedupePlugin为例展示webpack内部插件的使用:

    • webpack.config.js

      var webpack = require("webpack");
      var path = require("path");
      module.exports = {
          entry: "./example.js",
          output: {
              path: path.join(__dirname, "js"),
              filename: "output.js"
          },
          plugins: [
              new webpack.optimize.DedupePlugin()
          ]
      }
    • example.js

      var a = require("./a");
      var b = require("./b");
      a.x !== b.x;
      a.y !== b.y;
    • a/index.js

      module.exports = {
          x: require("./x"),
          y: require("./y"),
          z: require("../z")
      }
    • a/x.js
      module.exports = {"this is": "x"};
    • a/y.js
      module.exports = {"this is": "y", "but in": "a"};
    • b/index.js

      module.exports = {
          x: require("./x"),
          y: require("./y"),
          z: require("../z")
      }
    • b/x.js
      module.exports = {"this is": "x"};
    • b/y.js
      module.exports = {"this is": "y", "but in": "b"};
    • z.js
      module.exports = {"this is": "z"};
    • js/output.js
    • 总结
      观察上面的示例代码,a和b下都有模块x,且他们的代码是一样的。如果直接在命令行运行webpack example.js output.js,最终的生成文件会有两个模块x。再观察上面的webpack配置文件webpack.config.js,最后增加了plugins: [new webpack.optimize.DedupePlugin()],如果使用这个配置运行webpack构建,可以发现最后的生成文件js/ouput.js里只有个模块x,这个就是插件webpack.optimize.DedupePlugin的作用。

    更多内建插件的使用请参考LIST OF PLUGINS

    其他插件

    除了内建插件外,还有一些webpack插件发布在npm上了,我们可以通过npm命令来安装,例如:
    npm install --save-dev extract-text-webpack-plugin——extract-text-webpack-plugin是用于将某些类型的模块,如css,单独提取到文件的插件,具体如何使用该插件可以参考该项目的主页extract-text-webpack-plugin
    如果想要查找更多的webpack插件,可以在npm上利用webpack-plugin关键字来搜索,即webpack-plugin

    自定义插件

    Plugins-api


    开发工具

    webpack-dev-server

    认识webpack-dev-server

    webpack-dev-server是一个轻量级的node.js服务器,同webpack,webpack-dev-server也可以分析模块的依赖关系进行打包——webpack命令的所有选项对webpack-dev-server命令都有效。但不同的是,webpack-dev-server不会在本地目录下生成目标文件,而是放在内存里,通过访问服务器相应地址获取。另外,webpack-dev-server自带有一个轻量级的runtime,浏览器可以通过Socket.IO与服务器连接,服务器向客户端浏览器送编译状态信息,然后客户端/浏览器根据这些信息做相应的处理,如:刷新,模块热替换等。

    简单示例

    • 项目结构
      • app/
        • main.js
      • build/
      • test/
        • index.html
      • webpack.cong.js
    • webpack.config.js
    module.exports = {
      entry: {
        app: ["./app/main.js"]
      },
      output: {
        path: "./build",
        publicPath: "/assets/",
        filename: "bundle.js"
      }
    };
    • app/main.js
    document.write("Hello World!")
    • test/index.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      <script src="assets/bundle.js"></script>
    </body>
    </html>
    • 命令行运行webpack-dev-server --content-base test/
      • 访问项目路径build发现并没有生成相应的构建文件
      • 浏览器访问localhost:8080/,观察运行结果
    • 分析总结
      • webpack-dev-server --content-base test/中的--content-base指定html等静态资源的位置
      • webpack.config.js中的output.publicPath指定webpack模块打包后在服务器的路径

    webpack-dev-server命令行接口

    所有的webpack命令选项对webpack-dev-server命令都有效,但是没有默认的output参数。除此之外,webpack-dev-server还有一些额外的选项:
    - --content-base: 可以是文件、目录或者url,表示静态资源的基础路径
    - --quiet: 布尔值,控制是否要在控制台输出所有信息
    - --colors: 为控制台输出信息增加一些颜色
    - --no-info: 禁止输出一些无聊的信息?
    - --host: 主机名或ip地址
    - –port: 端口号
    - –inline: 布尔值,表示是否要将webpack-dev-server runtime集成到模块打包文件里,可以实现浏览器与服务器的通信
    - --hot: 布尔值,表示增加HotModuleReplacementPlugin插件,且将服务器切换到热模式中。注意点:不要再额外添加HotModuleReplacementPlugin
    - --https: 布尔值,表示webpack-dev-server是否开启HTTPS协议

    webpack-dev-server API

    http://webpack.github.io/docs/webpack-dev-server.html#api

    最佳实战

    在真实的项目开发中,前端需要与后台服务器交互——传输业务数据,这里通常会有一个后台服务器来向前端提供业务数据接口,我们也是在浏览器中访问这个后台服务器来使用功能的。这样的话,我们就需要将webpack生成的静态资源拷贝到我们项目的后台服务器下。如果是在最后发布的话,这样没有什么问题,但在实际开发中,每次调整代码都需要这么做,开发人员在就放弃使用webpack了。
    当然,webpack已经为我们解决了这个问题,我们只需要同时运行后台服务器和webpack-dev-server——后台服务器的HTML页面包含指向webpack-dev-server静态资源的script标签,而webpack-dev-server只是充当前端静态资源的服务器。
    示例:
    - webpack.config.js

    module.exports = {
      entry: {
        app: ["./app/main.js"]
      },
      output: {
        path: "./build",
        publicPath: "http://localhost:9090/",
        filename: "bundle.js"
      }
    };
    • webpack-dev-server启动命令: webpack-dev-server --config webapck.config.js --host localhost --port 9090 --inline
    • 后台服务器的index.html包含: <script src="http://localhost:9090/bundle.js">
    • 假设后台服务器地址是http://localhost:8080,则在浏览器中访问: http://localhost:8080/index.html

    注意点:
    - 为了保证总是(为了非入口模块)向webpack-dev-server发送请求来获得静态资源,必须向output.publicPath提供一个完整的URL——如果只是个目录路径的话,非入口模块静态资源的请求会向后台服务器发送,而不是webpack-dev-server
    - 为了连接webpacl-dev-server和它的runtime最好在webpack-dev-server命令后加上选项--inline

    常见问题

    • webpack-dev-server的运行配置方式?
      • 命令行选项,参考 webpack-dev-server-cli ,此外webpack-dev-server在命令行里也可以使用webpack的配置选项来控制服务器构建
      • nodejs自定义脚本运行,参考api
      • webpack.config.js的 devServer选项,参考 devserver
      • 可参考实例 run-option-mode
    • webpack-dev-server的运行选项content-base与publicPath的区别?
      webpack-dev-server是一个 轻量级 服务器, content-base指定服务静态资源(html等)的路径。webpack-dev-server构建后的代码是放在内存里的,并通过publicPath指定的路径发布,如果没有指定的话在服务器地址的根路径下(如:假设host为127.0.0.1,port为8080,output.filename为bundle,则构建后的代码文件地址是 http://127.0.0.1:8080/bundle.js
    • hot模式与inline模式?

    webpack-dev-middleware

    webpack-dev-middleware

    koa-webpack-dev

    koa-webpack-dev


    工具集成

    • grunt
    • gulp
    • bower
    • karma
    • Todo

    源码分析

    Todo


    最佳实战

    • 模块划分
    • 优化
    • Todo

    常见问题


    参考文献

    社区收藏

    工具对比

    中文文档

    最佳实践

    项目模板

    Webpack + React

    展开全文
  • 由于目前用的webpack是4.10.2, 处理过程中,也遇到了关于webpack版本的一些坑。根据webpack version 4+, 整理优化思路如下: 1. 去除devtool(罪魁祸首)  bundle.js达到9M,明显是webp...
  • 修改vue项目根目录下的 build/webpack.prod.conf.js文件 1、js文件: 由 output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils....
  • 一,优化背景上一篇关于webpack优化的文章webpack + react 优化:缩小js包体积谈到如何缩小webpack打包后的js代码体积,来减少网络请求数据量,这次尝试将第三方库(React,ajax等)从业务代码中分离出来,并且将...
  • Webpack 4 入门笔记

    千次阅读 2020-10-12 20:27:13
    Webpack4 入门笔记
  • Vue.js——60分钟webpack项目模板快速入门 ...webpack提供了和browserify类似的功能,前端资源管理这方面,它提供了更加出色的功能。 官方基于webpack提供了两种项目模板,分别是vue-w
  • npm run build 打包后页面无法显示问题

    千次阅读 2018-03-13 11:00:28
    今早运维小哥哥跑来找我,想给我的新项目发个版,我还是按照一般流程npm run build 然后git提交,打个tag v1.0.1,运维小哥哥说你前端页面没写好嘛? emmmm….老娘早就写好了。肯定是哪里出了问题,...config文...
  • 关于Vue - Webpack 项目打包出现的一些问题
  • webpack的面试题总结

    千次阅读 2019-07-25 20:53:51
    随着现代前端开发的复杂度和规模越来越庞大,已经不能抛开工程化来独立开发了,如react的jsx代码必须编译后才能浏览器中使用;又如sass和less的代码...众多前端工程化工具中,webpack脱颖而出成为了当今最...
  • 关于vue的npm run dev和npm run build 关于vue的npm run dev和npm run build ├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-server.js │ ├─utils.js ...
  • 介绍: 打包会输出一个类dll包(dll包源于windows的动态链接库),这些代码本身不会执行,主要是提供给我们的业务代码...将静态资源文件(运行依赖包)与源文件分开打包,先使用DllPlugin给静态资源打包,再使用Dll
  • webpack使用总结

    千次阅读 2017-02-15 10:39:15
    学习webpack的时候,看过它的官网,发现非常难懂,各种内容编排的很乱,并且挺生涩难懂的,和React Native等项目的官网比起来,差太多了,所以如果刚开始接触webpack的话,不建议直接去其官网看。 一、webpack...
  • Vue-webpack项目配置详解

    万次阅读 2017-08-18 18:36:28
    Vue-webpack项目配置详解1、首先我们构建vue项目后,就得先了解vue的项目结构├── build --------------------------------- webpack相关配置文件 │ ├── build.js --------------------------webpack打包...
  • webpack是什么...它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。 百度网盘视频下载:http://pan.baidu.com/s/1jIPJucu百度网盘在线观看:http://pan.baidu.com/sha
  • 1.下载vue-cli npm install vue-cli -g vue-cli的使用与详细介绍,可以到github上获取... 2.安装webpack项目模版 vue init 比如: vue init webpack my-project 之后可以当前目录下下载该模版,然后 npm install
  • 首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助。assets:项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如&lt; img src=”./logo....
  • webpack4实用配置指南-上手篇

    万次阅读 2018-08-23 17:13:48
    零、前言 算起来已经有3到4个项目的webpack构建打包经历。然而每次搭建起来还是有新手...篇幅较长,可完整阅读,也可遇到问题时即查即用。 此次采用webpack4,也顺便尝尝鲜。 # webpack4 把命令行工具抽离成了...
1 2 3 4 5 ... 20
收藏数 5,404
精华内容 2,161
热门标签
关键字:

webpack 在静态资源后面加版本