webpack总结 & 个人理解

学习资源————阮一峰 webpack-demos

webpack命令

根据webpack.config.js文件打包

webpack – for building once for development
webpack -p – for building once for production (minification)
webpack --watch – for continuous incremental build
webpack -d – to include source maps
webpack --colors – for making things pretty

打包并且在服务器上运行（相当于webpack + apache）

webpack-dev-server

entry参数

输入源，可多源头；最后的输出为bundle.js

entry: './main.js',
entry: {
    bundle1: './main1.js',
    bundle2: './main2.js'
  },

output参数

输出位置；

output: {
    filename: 'bundle.js'
  }
output: {
    filename: './dist/[name].js'
  }

module.loader 参数

babel-loader

编译加载器；用于转换到相应语言版本
babel-preset-es2015重编译es6

module: {
    loaders:[
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets[]=es2015&presets[]=react'
      },
    ]
  }

css-loader 参数

在js文件中，引用css

module: {
  loaders:[
    { test: /\.css$/, loader: 'style-loader!css-loader' },
  ]
}

image-loader

对在js中引用的图像进行打包;
图像名称重命名；小于8192bytes的图片直接转成dataURL即base64使用

module: {
    loaders:[
      { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
    ]
  }

css-module

css作为模块引用，具有全局性与非全局性

module: {
    loaders:[
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets[]=es2015&presets[]=react'
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader?modules'
      }
    ]
  }

css文件中的:global()属性，适用于全局；其余仅适用于引用该css文件的js文件中使用

plugin参数

配置引入的webpack插件
使用UglifyJs plugin压缩输出的bundle.js文件

var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
plugins: [
    new uglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]

传入环境变量

自定义plugin，使用process.env.CANSHU来控制开发模式与产品模式的不同分支

var devFlagPlugin = new webpack.DefinePlugin({
  __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
});
plugins: [devFlagPlugin]

在项目中设置DEBUG参数 set DEBUG=true；可以在js中引用DEV参数

chunk分块输出

使用require.ensure定义分离标志

// main.js
// require.ensure告诉webpack，./a.js文件应该从bundle.js中分离出来，放入单独的chunk文件(0.bundle.js)
方法1：
require.ensure(['./a'], function(require) {
  var content = require('./a');
  document.open();
  document.write('<h1>' + content + '</h1>');
  document.close();
});

方法2：

// 把a.js打包到另一个打包文件中去，是同步操作，获取这个js的exports才往下走
var load = require('bundle-loader!./a.js');:

load(function(file) {
  document.open();
  document.write('<h1>' + file + '</h1>');
  document.close();
});

common chunk提取

存在多个entry源的时候，使用ommonsChunkPlugin插件，把公共js提取到一个公共文件
把所有js中的公共部分提取，放进新生成的init.js文件中

plugins: [
    new CommonsChunkPlugin('init')
  ]

vendor chunk引入第三方库

使用vendor集中储存第三方库；
通过使用CommonsChunkPlugin插件，在待打包文件中引入了第三方库如jquery等，存在vendor文件中

entry: {
   app: './main.js',
   vendor: ['jquery'],
},
plugins: [
 new webpack.optimize.CommonsChunkPlugin(/* chunkName= */'vendor', /* filename= */'vendor.js')
]

暴露全局变量

data.js内保存全局变量；externals用来暴露data.js中的变量，并且映射；

// data.js
var data = 'Hello World';
var base = 'ni hao';

// webpack.config.js
externals: {
    // require("jquery") is external and available
    //  on the global var jQuery
    //  "jquery": "jQuery"
    'data': 'data',
    'data2': 'base'
  }

在js中可以通过require来获取这些全局变量，可以直接使用

// main.js
var data = require('data');
var base = require('data2');

hot module replacement 热重载模块

不需要刷新就可以看到module的变化
方法一：
添加热模块替换插件

entry: [
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:8080',
    './index.js'
  ],
plugins: [
    new webpack.HotModuleReplacementPlugin()
],

方法二：
webpack-dev-server --hot --inline
说明
--hot: 添加热模块替换插件、切换服务器到热加载模式
--inline: 把webpack-dev-server运行时间也打包进bundle.js
--hot --inline: also adds the webpack/hot/dev-server entry.

目录：

1. 学习资源
2. 概念总结
3. webpack必要元素
4. webpack其他元素
5. 遇到的问题
6. 常见loader整理
7. 常见plugin整理
8. devServer扩展阅读

1. 学习资源

maximilian 教学视频
webpack2 中文文档

2. 概念性总结

学习总结

由于个人对于抽象概念的理解能力较差，刚开始阅读文档进度很慢，而且看下来的效果并不好；
通过观看教学视频，感觉才是真正的体会到了webpack的实际用途，从实际用途出发再去理解文档就显得轻松一些；
虽然笔记写了一大篇，实际运用还是有不少坑，零碎的知识点也不少... 继续实践继续总结....

一句话总结时间：

将entry文件涉及到的所有js、css、less、img等（一条引用链），打包为一个独立js，能够替代以上所有的文件。

如何形成一条完整引用链：

原本的css在html中使用link标签引用；现改为在js中import './xxx.css'
如果多个css之间关联使用（如scss），可以在css内部形成一条引用链，即在css中 import './xxx.css'，再在js中引用这个处在css引用链末端的css

bundle.js的用处：

生成的bundle.js可以替代entry中对应源的所有涉及文件资源；
实际表现为，原先所有的html中的引用（link与script标签），都可以用引入bundle.js来替代

打包命令：

webpack 根据webpack.config.js生成打包文件
webpack -p 根据webpack.config.js生成打包文件，并且把打包文件压缩
webpack-dev-server 在服务器上运行webpack打包后的项目，打包文件只出现在服务器上，不出现在项目实体中

3. 必要要素：

• entry
• output
• loader
• plugins [array]

// 基本模板
var path = require("path");     // 路径解析package

// require获取、配置第三方插件
var extractTextPlugin = require("extract-text-webpack-plugin"); 
var extractPlugin = new extractTextPlugin({
    filename:'main.css'
});
var htmlWebpackPlugin = require('html-webpack-plugin');
var cleanPlugin = require('clean-webpack-plugin');

// 引入webpack-package，使用其中的插件
var webpack = require('webpack');    

// 以module的形式输出
module.exports = {

    entry: {
        bundle: './src/js/app.js'   // webpack的入口文件，将app中所有使用到的引用以及语法特性等能够打包的内容全部打包；  
    },

    output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'bundle.js'  // entry文件的打包最终成果的文件名
        publicPath: '/dist'    // 此属性用于在webpack-dev-server部署到服务器时候，告诉服务器该去哪里查找（查找webpack生成在服务器端的打包文件）
    },

    module: {
        //  rules以数组属性，配置不同文件的打包规则
        rules: [
            {
                test: /\.js$/,   // 匹配原则，正则表达式:以.js结尾
                // 当use中出现多个loader，加载顺序从后往前，比如打包css文件时，写作：['style-loader','css-loader']，先用css-loader载入css文件，再使用style-loader把样式style引入待打包的js文件
                use: [
                    {
                        loader: 'babel-loader',
                        // option类似于一个get路径中的queryString，用于配置loader，可以写作字符串形式
                        options: {
                            presets: ['es2015']
                        }
                    }
                ]
            } 
        ]
    },

    plugins: [
        // extractPlugin 指定inject位置
        extractPlugin, 
        // DefinePlugin： 暴露全局变量
        new webpack.DefinePlugin({
          PRODUCTION: JSON.stringify("production")  
        })
        // ProvidePlugin：解析符号定义
        new webpack.ProvidePlugin({
           $: 'jquery',       // 告诉解析器，遇到这个符号，就去找package
        }),
        // htmlWebpackPlugin插件： 用于复制html，并且向其中自动注入(inject)服务器端生成的js等文件
        new htmlWebpackPlugin({
          filename: 'index.html',
          template: 'src/index.html'
        }),
        // cleanPlugin用于：每次使用webpack生成打包文件前先抹除dist文件下的旧打包文件
        new cleanPlugin(['dist'])   
    ]
}

4. 其他属性

module.exports = {
    // devServer: 用于配置webpack-dev-server命令启动的服务器
    devServer: {
        // publicPath: 此路径下的打包文件在浏览器中可访问；也是打包文件的存放目录，必须保证"/"开头、结尾
        publicPath: /asset/   // 确定应该从哪里提取bundle，优先于contentBase属性
        contentBase: path.join(__dirname, "dist"),   // 告诉服务器从哪里提供（静态）内容
        compress: true,   // 一切服务都启用gzip压缩
        port: 9000       //  指定监听请求的端口号
        headers: {"X-Custom-Foo": "bar"}   // 在所有请求中添加首部内容
        historyApiFallback： true   // 任意404相应提供为index.html 
        host: "0.0.0.0"  // 指定使用一个host  默认是localhost
        hot: true    // 热加载
        lazy: true  // 惰性模式：只在请求时，才编译bundle（不watch文件变动） 
        proxy: {
            "/api": "http://localhost:3000",  // 向后端服务器3030发送api请求
            // 对当前服务器/api/users的请求，现在会被代理到http://localhost:3000/api/users
            pathRewrite: {"^/api" : ""},   // 重写路径：可以停止传递
            secure: false,    // 默认不接受https上的使用无效证书的后端服务器；set false则接受所有
            bypass： function(){}   // 对路由进行处理，在不停用代理的情况下绕过代理
        }

    watch: true,   // watch属性监测文件改动，默认false

    devtool: 'source-map',   // 当js使用了uglify插件进行压缩，debug时无法一一对应，因此使用source-map建立映射


}

5. 遇到的问题

1、 图片打包路径引用问题

引用webpack打包的图片，引用路径错误
错误原因： 对于原始图片，使用了相对路径进行引用

解决方法1：

源码图片路径和打包后的图片路径保持一致，比如：源码图片是放在/src/img/a.png下,引用图片的的css路径是/src/style/a.css, 这时候a.css的引用写法是 url("../img/a.png");打包后的图片路径是放在/build/img/a.png,引用图片的的css路径是/build/style/a.css, 这时候a.css的引用写法还是 url("../img/a.png")，这时候就不会出问题

解决方法2：

webpack.config.js使用绝对路径publicPath：
如果是放在dist目录下：

output: {
        publicPath:'/dist/'
}

这样所有资源文件的路径都会把publicPath放到前面，就不会有路径问题了

6. loader整理

• less-loader 引入less文件
• css-loader 引入css文件
• style-loader 引入样式
• bable-core 转换es6
• babel-loader 引入转换后的js
• html-loader 转换html的import

7. 插件整理

• html-webpack-plugin 重建html，包含webpack打包后的正确引用inject
• clean-webpack-plugin 清除历史build文件(dist)后再重新打包
• extract-text-webpack-plugin 分离css文件
• CommonsChunkPlugin 公共模块提取单独打包
• uglifyjs-webpack-plugin 压缩js文件

8. devServer配置扩展阅读

devServer: {
  // webpack-dev-server options

  contentBase: "/path/to/directory",
  // Can also be an array, or: contentBase: "http://localhost/",

  hot: true,
  // Enable special support for Hot Module Replacement
  // Page is no longer updated, but a "webpackHotUpdate" message is sent to the content
  // Use "webpack/hot/dev-server" as additional module in your entry point
  // Note: this does _not_ add the `HotModuleReplacementPlugin` like the CLI option does. 

  historyApiFallback: false,
  // Set this as true if you want to access dev server from arbitrary url.
  // This is handy if you are using a html5 router.

  compress: true,
  // Set this if you want to enable gzip compression for assets

  proxy: {
    "**": "http://localhost:9090"
  },
  // Set this if you want webpack-dev-server to delegate a single path to an arbitrary server.
  // Use "**" to proxy all paths to the specified server.
  // This is useful if you want to get rid of 'http://localhost:8080/' in script[src],
  // and has many other use cases (see https://github.com/webpack/webpack-dev-server/pull/127 ).

  setup: function(app) {
    // Here you can access the Express app object and add your own custom middleware to it.
    // For example, to define custom handlers for some paths:
    // app.get('/some/path', function(req, res) {
    //   res.json({ custom: 'response' });
    // });
  },

  // pass [static options](http://expressjs.com/en/4x/api.html#express.static) to inner express server
  staticOptions: {
  },

  clientLogLevel: "info",
  // Control the console log messages shown in the browser when using inline mode. Can be `error`, `warning`, `info` or `none`.

  // webpack-dev-middleware options
  quiet: false,
  noInfo: false,
  lazy: true,
  filename: "bundle.js",
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  },
  // It's a required option.
  publicPath: "/assets/",
  headers: { "X-Custom-Header": "yes" },
  stats: { colors: true },

  https: {
    cert: fs.readFileSync("path-to-cert-file.pem"),
    key: fs.readFileSync("path-to-key-file.pem"),
    cacert: fs.readFileSync("path-to-cacert-file.pem")
  }
});

作者：daisimin7
链接：http://www.jianshu.com/p/7da7643f24fe
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。