webpack2使用中的一些知识点整理

@onvno 2017-05-30 04:02:31发表于 iuap-design/blog

备注:markdown编辑工具不同,导入略有排版问题,已经调整部分,其他部分应该不影响读取

文档

* webpack:中文官网

* awesome-webpack

* http-proxy-middleware

部分配置说明

* ExtractTextPlugin分离CSS插件启动后,不会在进行HMR,建议在build阶段使用

* resolve配置下的alias除了表面别名的意思外,对配置路径有很大作用,类似requirejs的别名配置

* externals,待补充,官网链接,需要注意有library,libraryTargetumd,cdm...多种兼容模式

* cross-env跨平台变量支持"build": "cross-env NODE_ENV=production PLATFORM=web webpack",官网链接

* hash, chunkhash区别:hash为统一构建,所有文件后缀均一致,chunkhash为单独构建,这样可以确保第三方文件无需多次编译。出击阶段建议开发环境使用hash,生产环境使用chunkhash,更好方法是通过manifest依赖插件创建json文件服用。参考What is the difference between hash, chunkhash and contenthash?

* outlibrary:导出库(exported library)的名称,相关的有libraryTarget

* resolve.extensions:使用extensions: [".js", ".json"],能够使用户在引入模块时不带扩展:import File from '../path/to/file'

* target:告诉 webpack 这个程序的目标环境是什么,默认为web

# 配置常用命令


\# 监听

webpack --progress --watch

\# open browser

webpack-dev-server --open

第一完整示例及分析

代码部分

how-to-setup-webpack-2



'use strict';

var webpack = require('webpack');

var config = {

  context: __dirname + '/src', // `__dirname` is root of project and `src` is source

  entry: {

    app: './app.js',

  },

  output: {

    path: __dirname + '/dist', // `dist` is the destination

    filename: 'bundle.js',

    publicPath: "/assets",

  },

  module: {

    rules: [

      {

        test: /\.js$/, //Check for all js files

        loader: 'babel-loader',

        query: {

          presets: [ "babel-preset-es2015" ].map(require.resolve)

        }

      },

      {

        test: /\.(sass|scss)$/, //Check for sass or scss file names

        use: [

          'style-loader',

          'css-loader',

          'sass-loader',

        ]

      },

      { 

        test: /\.json$/, 

        loader: "json-loader"  //JSON loader

      }

    ]

  },

  //To run development server

  devServer: {

    contentBase: __dirname + '/src',

  },

  devtool: "eval-source-map" // Default development sourcemap

};

// Check if build is running in production mode, then change the sourcemap type

if (process.env.NODE_ENV === "production") {

  config.devtool = "source-map";

  // Can do more here

  // JSUglify plugin

  // Offline plugin

  // Bundle styles seperatly using plugins etc,

}

module.exports = config;

解读部分参数概念

* context:设置编译目录,默认为当前配置文件同级目录

* publicPath:用于项目上线方便引入CDN路径的公共部分

# 实例二

A Beginner’s Guide to Webpack 2 and Module Bundling

代码分割

System.import & require.ensure

> Another way to split our bundle is with System.import or require.ensure. By wrapping sections of code in these functions you create a chunk to be loaded on demand at run time. This can significantly improve load time performance by not sending everything to the client at the start. System.import takes the module name as an argument and returns a Promise. require.ensure takes a list of dependencies, a callback and an optional name for the chunk.

代码分割后,第三方代码合成太大,建议直接上cdn

* 使用externals进行配置第三方


\# html

...

<script src="https://code.jquery.com/jquery-3.1.0.js"

  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="

  crossorigin="anonymous"></script>

...

\# webpack.config.js

externals: {

  jquery: 'jQuery'

}

\# 使用

import $ from 'jquery';

$('.my-element').animate(...);

# hashchunkhash的区别

官网链接

> 如果文件内容在两次构建之间没有变化,就生成相同的文件名的话会怎么样?例如,当依赖没有更新,只有应用代码更新的时候,就没有必要去重新下载一个公共库(vendor)文件。

webpack 允许你根据文件内容生成哈希值,只要用 [chunkhash] 替换 [hash] 就可以了。以下是新的配置:



module.exports = {

  /*...*/

  output: {

    /*...*/

\-   filename: "[name].[hash].js"

\+   filename: "[name].[chunkhash].js"

  }

};

链接

* how-to-setup-webpack-2

* A Beginner’s Guide to Webpack 2 and Module Bundling

* Long-term caching of static assets with Webpack