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('

' + content + '

'); document.close(); });

方法2:

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

load(function(file) {
  document.open();
  document.write('

' + file + '

'); 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.

你可能感兴趣的:(webpack入门学习笔记)