webpack3 针对一般项目用这份配置基本够了

这段时间在将webpack从1升级到3，因为等项目稳定下来想升级2的时候，3都出来了。想了解3的东西，直接可以看官网就好了，都有解释，根本不用看别人的翻译，官网也提供了中文，地址：https://webpack.js.org。不要浪费时间看别人的博客，多看看官方文档。我这里只是贴出我自己项目的webpack3的配置文件内容。没有特殊要求，我这份就足够了，目前只对SPA类型的项目做了升级，分别有两份配置（开发环境和生产环境）。

开发环境配置如下：

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanPlugin = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const DashboardPlugin = require('webpack-dashboard/plugin');
const path = require('path');
const autoprefixerFromPostcss = require('autoprefixer');
const cssnanoFromPostcss = require('cssnano');

module.exports = {

entry: ['babel-polyfill', __dirname + '/src/main.js'],
output: {
path: __dirname + '/public',
filename: 'js/[name].[hash:8].bundle.js',
chunkFilename: 'js/[name]-[id].[hash:8].bundle.js',
},

module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: true,
},
},
{
loader: 'postcss-loader',
options: {
plugins: (loader) => [
autoprefixerFromPostcss(),
cssnanoFromPostcss(),
],
},
},
],
}),
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['react',
['env',{
'targets': {
'browsers': ['last 2 versions', 'ie >= 9'],
},
'modules': false,
'loose': true,
'useBuiltIns': true,
'debug': true,
},
]
],
plugins: [
'babel-plugin-transform-class-properties',
'babel-plugin-syntax-dynamic-import',
[
'babel-plugin-transform-runtime', {
'helpers': true,
'polyfill': true,
'regenerator': true,
},
],
[
'babel-plugin-transform-object-rest-spread', {
'useBuiltIns': true
},
],
[
'import',
{
"libraryName": "antd",
"style": true,
}
]
],
},
},
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader',
}, {
loader: 'less-loader',
}],
fallback: 'style-loader',
}),
},
{
test: /
4000
\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
use: {
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
outputPath: 'images',
},
},
},
{
test: /\.js$/,
use: ['source-map-loader'],
enforce: 'pre',
},
],
},

plugins: [
new CleanPlugin(['public'], {
'root': __dirname,
'verbose': true,
'dry': false,
}),
new CopyWebpackPlugin([
{from: __dirname + '/src/assets', to: __dirname + '/public/assets'},
]),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
},
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new HtmlWebpackPlugin({
template: __dirname + '/src/index.html',
}),
new ExtractTextPlugin({
filename: 'css/[name].[contenthash].css',
}),
new DashboardPlugin(),
new webpack.HotModuleReplacementPlugin(),
],

devtool: 'source-map',

devServer: {
contentBase: path.join(__dirname, 'public'),
compress: true,
host: "0.0.0.0",
port: '8000',
historyApiFallback: true,
inline: true,
hot: true,
hotOnly: true,
},
};

生产环境配置如下：

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanPlugin = require('clean-webpack-plugin'); // 清理文件夹

module.exports = {

entry: __dirname + '/src/main.js',
output: {
path: __dirname + '/dist/pro',
filename: 'js/[name]-[hash:7].js',
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: true,
},
},
{
loader: 'postcss-loader',
options: {
plugins: (loader) => [
require('autoprefixer')(),
require('cssnano')(),
],
},
},
],
}),
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['react',
['env',{
'targets': {
'browsers': ['last 2 versions', 'ie >= 9'],
'uglify': true
},
'modules': false,
'loose': true,
'useBuiltIns': true,
},
]
],
plugins: [
'babel-plugin-transform-class-properties',
'babel-plugin-syntax-dynamic-import',
[
'babel-plugin-transform-runtime', {
'helpers': true,
'polyfill': true,
'regenerator': true,
},
],
[
'babel-plugin-transform-object-rest-spread', {
'useBuiltIns': true
},
],
[
'import',
{
"libraryName": "antd",
"style": true,
}
]
],
},
},
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
use: {
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
outputPath: 'images',
},
},
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader',
}, {
loader: 'less-loader',
}],
fallback: 'style-loader',
}),
},
{
test: /\.gz$/,
enforce: 'pre',
use: 'gzip-loader',
},
],
},

plugins: [
// 清空输出目录
new CleanPlugin(['dist/pro'], {
'root': __dirname,
'verbose': true,
'dry': false,
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
},
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new HtmlWebpackPlugin({
template: __dirname + '/src/index.html',
}),
new ExtractTextPlugin({
filename: 'css/[name].[contenthash].css',
}),
new webpack.optimize.UglifyJsPlugin(),
new CopyWebpackPlugin([
{from: __dirname + '/src/assets', to: __dirname + '/dist/pro/assets'},
]),
],
};