一起学Webpack

发表于

Webpack 入门

  1. 不需要用script标签引入库， 一切依赖都可以通过npm安装。
  2. 插件系统很强大。

主要webpack.config.js文件

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
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
    entry: './index.js', //入口
    output: { //输出
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: { //正则方式匹配文件，对文件使用指定的module处理
        rules: [{
                test: /\.txt$/,
                use: 'raw-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    "presets": ["env"]
                }
            }
        ]
    },
    plugins: [ //所使用的插件
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        hot: true, // 告诉devserver启用htm
        contentBase: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    }
}

module.exports = config;

其他的用到了再查咯。