开发工具(devtool)

此选项控制是否生成，以及如何生成source map。 
要开启source map，我们还需要安装source-map-loader：

npm i -D source-map-loader

同时添加loader的配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ["source-map-loader"],
        enforce: "pre"
      }
    ]
  },
  devtool: 'source-map' // 然后我们就可以开启了
};

webpack-dev-server

webpack-dev-server是webpack官方提供的一个小型Express服务器，主要提供两个功能：

1. 为静态文件提供服务

2. 自动刷新和热替换(HMR)

在实际开发中，webpack-dev-server可以实现以下需求：

每次修改代码后，webpack可以自动重新打包 
浏览器可以响应代码变化并自动刷新 
一般来说，我们可以通过引入webpack.config.js文件然后调整配置就可以启用了：

// webpackServer.config.js文件
// 生成配置
var webpack = require('webpack');
var path = require('path'); // 引入node的path库
var config = require("./webpack.config.js"); // 引入webpack.config.js
config.entry.concat(['webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:3333'
]);
module.exports = config;

然后命令行启动：

webpack-dev-server --config webpackServer.config.js --host 0.0.0.0 --port 3333 --devtool eval --progress --colors --hot --content-base dist

看着有点长，其实webpack-dev-server –config webpackServer.config.js后面的都是配置，也可以在webpackServer.config.js文件中写入。

常用配置：

• devServer.contentBase: 告诉服务器从哪里提供内容

• devServer.port(CLI): 指定要监听请求的端口号

• devServer.host(CLI): 指定使用一个host。默认是localhost

• devServer.hot： 启用webpack的模块热替换特性

• devServer.progress(CLI): 将运行进度输出到控制台。

其余配置请移步官方文档。

前端框架与Webpack

这里本骚年就不一个个讲解了，简单分享几个用过的webpack.config.js配置吧。

Angular1 + Webpack

var webpack = require('webpack');
var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
var config = {
    entry: {
        app: ['./app/bootstrap.js'] // 入口文件
    },
    output: {
        path: path.resolve(__dirname, 'app/entry'), // 编译后文件
        publicPath: '/entry/',
        filename: 'bundle.js' // 生成文件名
    },
    module: {
        loaders: [{
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        }]
    },
    plugins: [
        // 使用CommonChunksLoader来提取公共模块
        new CommonsChunkPlugin({
            name: 'vendors',
            filename: 'vendors.js',
            minChunks: function (module) {
                var userRequest = module.userRequest;
                if (typeof userRequest !== 'string') {
                    return false;
                }
                return userRequest.indexOf('node_modules') >= 0
            }
        })
    ]
};
module.exports = config;

教程请移步玩转Angular1(1)–webpack/babel环境配置。

React + Webpack

var webpack = require('webpack');
var path = require('path'); //引入node的path库
var HtmlwebpackPlugin = require('html-webpack-plugin');
var config = {
    entry: ['webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:3000',
        path.resolve(__dirname, 'app/index.js')
    ], //入口文件
    output: {
        path: path.resolve(__dirname, 'dist'), // 指定编译后的代码位置为 dist/bundle.js
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            // 为webpack指定loaders
            {
                test: /\.less$/,
                loaders: ['style', 'css', 'less'],
                include: path.resolve(__dirname, 'app')
            },
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: 'node_modules'
            }
        ]
    },
    plugins: [
        // 入口模板文件解析
        new HtmlwebpackPlugin({
            title: 'React Redux Test',
            template: path.resolve(__dirname, 'templates/index.ejs'),
            inject: 'body'
        })
    ],
    devtool: 'source-map'
}
module.exports = config;

教程请移步React-Redux使用笔记1–使用webpack搭建React开发环境。

Angular2 + Typescript + Webpack

var webpack = require('webpack');
var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var config = {
    entry: ['babel-polyfill', './src/bootstrap.ts'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: './bundle.js'
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: ["babel-loader", "ts-loader", "angular2-template-loader"],
                exclude: /node_modules/
            },
            {
                test: /\.(html|css)$/,
                use: ['raw-loader'],
                exclude: [path.resolve(__dirname, 'src/index.html')]
            },
            {
                test: /\.async\.(html|css)$/,
                loaders: ['file?name=[name].[ext]']
            }, {
        test: /\.js$/,
        use: ["source-map-loader"],
        enforce: "pre"
      }]
    },
    plugins: [
        new HtmlwebpackPlugin({
            template: path.resolve(__dirname, 'src/index.html'),
            inject: 'body'
        }),
        new webpack.ContextReplacementPlugin(
            /angular(\\|\/)core(\\|\/)@angular/,
            path.resolve(__dirname, 'src'),
            {}
        )
    ],
    devtool: 'source-map'
};
module.exports = config;

转载请注明： Vue教程中文网 - 打造国内领先的vue学习网站-vue视频,vue教程,vue学习,vue培训 » 正确配置webpack，快速启动各种框架（二）