webpack配置文件详解，大致步骤、package.json的配置、webpack.config.js配置详解。主要配置项：entry、output、loaders、plugins，其他配置：resolve、devtool 、devServer。

大致步骤

  • 初始化项目：cnpm init
  • 新建webpack.config.js文件
  • 导入相关包：cnpm install webpack css-loader style-loader
    • webapck ：webpack项目依赖；
    • css-loader、style-loader：.css文件的引入，以及样式以style内置的形式嵌入到html中；
    • autoprefixer、postcss-loader：css添加各厂商前缀；
    • clean-webpack-plugin：清除插件；
    • html-webpack-plugin：自动生成html模板插件；
  • 两个webpack配置文件，或多个配置文件。
    • webpack.config.dev.js：npm start，开发环境，作为项目开发时 使用。
    • webpack.config.js ：npm run build，发布环境，作为项目上线时使用。

package.json的配置

其中scripts用于启动命令行：

"scripts": {
    "start": "webpack --config webpack.config.dev.js -p", 
    "detail": "webpack --config webpack.config.dev.js --progress --display-modules --display-reasons --colors ",
    "build": "webpack --config webpack.config.js -p"
  },

在终端执行的方式有些不同，分两种情况：

  • start命令：cnpm start
  • 其他name命令：cnpm run name

webpack.config.js配置详解

  • webpack.config.js

    /**
 * webpack基本配置
 * huanghui 20171213
 */
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
    entry: {
        a : "./static/js/a.js",
        b : "./static/js/b.js"
    },
    output: {
        path: __dirname + "/dist/build",
        filename: "[name]-[hash:8].js"
    },
    //devtool: 'eval-source-map',//开发是使用
    devServer: {
        contentBase: "./dist/build/",//本地服务器所加载的页面所在的目录，默认8080端口
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究'),//压缩文件，注释
        new HtmlWebpackPlugin({
            template: __dirname + "/static/html/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
        }),
        new webpack.HotModuleReplacementPlugin(),//热加载插件
        new CleanWebpackPlugin('./dist/build/*.*', {
            root: __dirname,
            verbose: true,
            dry: false
        })
    ],
};

  • 其他配置

    （1）名称

    • 每个项目下都必须配置有一个 webpack.config.js ，它的作用如同常规的 gulpfile.js。就是一个配置项，告诉 webpack 它需要做什么。

    （2）主要配置项：

    • entry 是页面入口文件配置。

    • output 是对应输出项配置。

    • module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理。

    • plugins 是插件项。

      ​

    （3）其他配置

    • resolve 辅助配置。
    • devtool 开发时使用，能够较快识别源文件。
    • devServer 启动本地服务

    ​

详见【demo03-6】

以上文章来自：黄卉 ， https://huanghui8030.github.io/webpack/config.html