前言

本篇文章只為了說明在 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 中來寫。

目前我用到的改動基本上就是這些了杀餐，其他的大家可以查一查相應的改動干发。

后面一篇文章會說明一下，改動過程中出現的一些錯誤的原因 : )