webpack1 到 webpack2 的一些坑

前言

本篇文章只为了说明在 webpack 的配置上，1 到 2的普遍改动，对于 webpack 内置的改动，大家可以去官网看。

直接贴代码

先贴一个我在 webpack1 时使用的配置。

var path = require('path');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
module.exports = {
    entry: {
        'Index': './app/index.js'
    },
    output: {
        path: path.join(__dirname, 'devBuild'),
        publicPath: '/',
        filename: "[name]/[name].[hash:5].js"
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel",
                query: {
                    presets: ['react', 'es2015']
                }
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style', 'css!postcss!sass')
            },
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract('style', 'css!postcss!less')
            },
            {test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'style!css')},
            {test: /\.(png|jpg|gif)$/, loader: "url?limit=8192&name=./img/[name].[ext]"},
            {test: /\.json$/, loader: "json"},
            {test: /\.svg/, loader: 'svg-url-loader'}
        ]
    },
    url: {
        dataUrlLimit: 2048
    },
    resolve: {
        modulesDirectories: ['node_modules', path.join(__dirname, '../node_modules')],
        extensions: ['', '.js', '.json']
    },
    devtool: 'source-map',
    postcss: function () {
        return [autoprefixer];
    },
    plugins: [
        new ExtractTextPlugin('[name]/[name].[hash:5].css'),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'app/index.html',
            chunks: ['Index']
        }),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('development')
                // 'NODE_ENV': JSON.stringify('production')
            }
        })
    ]
};

对于配置项的含义不懂得朋友可以先看看文档。。。

然后贴一下修改后的配置

var path = require('path');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
    entry: {
        'Index': './app/index.js'
    },
    output: {
        path: path.join(__dirname, 'devBuild'),
        publicPath: '/',
        filename: "[name]/[name].[hash:5].js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: [path.resolve(__dirname, 'node_modules')],
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['react', 'es2015'],
                        plugins: ['syntax-dynamic-import']
                    }
                }
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract(['css-loader', {
                    loader: 'postcss-loader',
                    options: {
                        plugins: (loader) => [
                            require('postcss-import')({root: loader.resourcePath}),
                            require('autoprefixer')(), //CSS浏览器兼容
                            require('cssnano')()  //压缩css
                        ]
                    }
                }, 'sass-loader'])
            },
            {
                test: /\.css$/, use: ExtractTextPlugin.extract(['css-loader', {
                loader: 'postcss-loader',
                options: {
                    plugins: (loader) => [
                        require('postcss-import')({root: loader.resourcePath}),
                        require('autoprefixer')(), //CSS浏览器兼容
                        require('cssnano')()  //压缩css
                    ]
                }
            }])
            },
            {test: /\.(png|jpg|gif)$/, use: ["url-loader?limit=8192&name=./img/[name].[ext]"]},
            {test: /\.svg/, use: ['svg-url-loader']}
        ]
    },
    resolve: {
        modules: ['node_modules', path.join(__dirname, '../node_modules')],
        extensions: ['.js', '.json', '.scss', 'css']
    },
    devtool: 'source-map',
    plugins: [
        new ExtractTextPlugin('[name]/[name].[hash:5].css'),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'app/index.html',
            chunks: ['Index']
        }),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('development')
                // 'NODE_ENV': JSON.stringify('production')
            }
        }),
        // new webpack.LoaderOptionsPlugin({
        //  debug: false,
        //  options: {
        //      postcss: [
        //          autoprefixer()
        //      ],
        //  },
        // }),
        new OpenBrowserPlugin({url: 'http://localhost:1234'})
    ]
};

从上到下来说吧，首先就 module 内的变化，由原来的 loaders 字段改为了 rules 字段，然后 rules 内，每个匹配项的 loader 改为了 use，原 loader 项后面的字符串改为了数组的形式，其中的一些配置放在了 options 中，然后是 resolve 的改动，modulesDirectories 字段改为了 modules，原本单独写的 postcss 配置现在要写在 options 中，或者在最后面 注释掉的 LoaderOptionsPlugin 中来写。

目前我用到的改动基本上就是这些了，其他的大家可以查一查相应的改动。

后面一篇文章会说明一下，改动过程中出现的一些错误的原因 : )