webpack入门，配置实例

结构：

webpack.config.js

// webpack.config.js
const webpack = require ("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    // entry: {
    //     main:__dirname + '/src/main.js', // 对象方式最可拓展，多页面应用，第三方库分离均可用
    // },
    entry:__dirname + '/src/main.js', // 入口文件路径
    // output: {
    //     filename: '[name].js',
    //     path: __dirname + '/dist'//如果配置创建了多个单独的 "chunk"（例如，使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件），则应该使用占位符(substitutions)来确保每个文件具有唯一的名称。
    //   },
    output: {
        path: __dirname + '/dist/', // 存放打包后文件的路径
        filename: 'bundle.js'   // 打包后文件名
    },
    devtool: 'source-map', // 配置生成的source-map
    devServer: {//devServer配置
        contentBase: './dist',//默认 webpack-dev-server 会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录.
        host:'localhost',
        port: '9000',//设置默认监听端口，如果省略，默认为"8080".
        inline: true,//当源文件改变时会自动刷新页面.
        historyApiFallback: true,//在开发单页应用时非常有用，它依赖于 HTML5 history API，如果设置为 true，所有的错误跳转将指向 index.html.
        // watchOptions: {
        //     aggregateTimeout: 2000,//浏览器延迟多少秒更新
        //     poll: 1000//每秒检查一次变动
        // },
        hot:true,//启动热更新，必须搭配new webpack.HotModuleReplacementPlugin()插件
        open: true//直接打开浏览器
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + '/src/index.html' // new一个插件的实例，并传入相关的参数
        }),
        new webpack.HotModuleReplacementPlugin(),
        //new webpack.NamedModulesPlugin(), //添加，官方推荐的帮助分析依赖的插件
        // new CleanWebpackPligin("./dist", {
        //     exclude: ["index.html"]
        //   })
        // new HtmlWebpackPlugin({
        //     template:"index.html",
        //     title:'index',
        //     inject: true
        // }),
        // new webpack.NamedModulesPlugin(), 
        // HMR shows correct file names in console on update.
        // new webpack.NoEmitOnErrorsPlugin()
    ],
    module: {//loader 用于对模块的源代码进行转换
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/, // 编译打包时排除node_modules文件夹
                // query: {
                //     presets: ['es2015']//有@babel/preset-env后不需要此项配置
                // }
            },
            // {
            //     test: /\.css$/,
            //     use: [
            //         { loader: 'style-loader'},
            //         {
            //             loader: 'css-loader?modules',// 此处多加了一个?modules,l类名会被编译成hash字符串
            //             options: { modules: true }
            //         }
            //     ]
            // }
            {
                test: /\.css$/,
                use: [
                    // 'style-loader', 'css-loader?modules&importLoaders=1',//importLoader写在potions里
                    // {loader:'style-loader'},
                    // {loader:'css-loader?modules'},
                    'style-loader', 'css-loader?modules',//上两行的简写
                    {
                        loader: 'postcss-loader',
                        options: {
                            importLoaders: 1,
                            plugins: [
                                require('autoprefixer')//根据浏览器添加前缀（npm install --save-dev postcss-loader autoprefixer）
                            ]
                        }
                    }
                ]
            }
        ]
    }
};

package.json

{
  "name": "study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server",
    "build": "webpack --config ./webpack.prod.config.js --progress"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.5",
    "autoprefixer": "^9.8.5",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.1.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^3.6.0",
    "html-webpack-plugin": "^4.3.0",
    "postcss-loader": "^3.0.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

postcss.config.js

// postcss.config.js
module.exports = {
    plugins: [
        // 调用autoprefixer插件,还可以配置选项添加需要兼容的浏览器版本.
        require("autoprefixer")[{ browsers: ['ie>=8', '>1% in CN'] }]
    ]
}

webpack.prod.config.js

// webpack.prod.config.js
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: __dirname + '/src/main.js', // 入口文件路径文件所在的目录.
    output: {
        path: __dirname + '/build/',    // 存放打包后文件的路径
        filename: 'bundle.js'   // 打包后文件名
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/ // 编译打包时排除node_modules文件夹
            },
            {
                test: /\.css$/,
                // 此处结构需要做一下修改
                use: [
                    'style-loader', 'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            importLoaders: 1,
                            plugins: [
                                require('autoprefixer')
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + '/src/index.html' // new一个插件的实例，并传入相关的参数
        })
    ]
};