1、安装webpack

全局安装：

1
npm install -g webpack

2、配置webpack.config.js文件

1
2
3
4
5
6

var webpack = require('webpack');

module.exports = {
  ...
};

2、配置entry

1
2
3
4
5
6
7
8
var webpack = require('webpack');

module.exports = {
    //页面入口文件配置
    entry: {
        index : './src/js/page/index.js'
    },
};

3、配置output

1
2
3
4
5
6
7
8
9
10
11
var webpack = require('webpack');

module.exports = {
    //输出文件配置
    output: {
        path: __dirname + '/dist',
        publicPath: '/',
        filename: '[name].bundle.js',
        chunkFilename: '[name].bundle.js',
    }
};

4、配置loaders

1
2
3
4
5
6
7
8
9
10
11
12
13
var webpack = require('webpack');

module.exports = {
    //配置loaders
    module: {
        loaders: [
          {
            test: /\.js$/,
            loader: 'bable'
          },
        ]
    }
};

5、配置plugins

1
2
3
4
5
6
7
8
9
10
11
var webpack = require('webpack');

module.exports = {
    //配置plugins
    plugins: {
        new webpack.DefinePlugin({
          __PRODUCTION: JSON.stringify(false)
        }),
        ...
    }
};

6、配置devtool

7、resolve

8、externals

9、devServer

10、运行webpack

1
2
3
4
5
6
7
webpack //开发环境下编译

webpack -p //产品编译及压缩

webpack --watch //开发环境下持续的监听文件变动来进行编译(非常快!)

webpack -d //引入 source maps

3、常见的webpack插件：

（1）webpack-dev-server ：修改内容后浏览器