2019-04-26 webpack产品阶段的构建:

1.安装模块：

Webpack可以使用npm安装，新建一个空的练习文件夹（此处命名为webpack sample progect），在终端中转到该文件夹后执行下述指令就可以完成安装。

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

2.webpack的基本构建：

在产品阶段，可能还需要对打包的文件进行额外的处理，比如说优化，压缩，缓存以及分离CSS和JS。

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
  output: {
    path: __dirname + "/build", //打包后的文件存放的地方
    filename: "bundle.js" //打包后输出文件的文件名
  },

  module: {
    loaders: [  
      {
        test: /\.json$/,
        loader: "json"
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /\.css$/,
        loader: 'style!css?modules!postcss'
      }
    ]
  },
  postcss: [
    require('autoprefixer')
  ],

  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + "/app/index.tmpl.html"
    }),
  ],

}


//package.json
{
  "name": "webpack-sample-project",
  "version": "1.0.0",
  "description": "Sample webpack project",
  "scripts": {
    "start": "webpack-dev-server --progress", //在此配置
    "build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress"
  },
  "author": "Cássio Zen",
  "license": "ISC",
  "devDependencies": {...},
  "dependencies": {...}
}

具体内容参考：http://blog.csdn.net/u014181418/article/details/52709985

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");        //提取成单个css文件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');      //压缩css插件
const HtmlWebpackPlugin = require('html-webpack-plugin');       //html文件打包，压缩
const CleanWebpackPlugin = require("clean-webpack-plugin");     //删除原来的打包文件
const copyWebpackPlugin = require("copy-webpack-plugin");     //复制静态文件

module.exports = {
    mode: 'development',
    entry: {        //入口文件
        index: './src/js/index.js',
    },
    output: {       //出口文件
        publicPath: '',     //模板、样式、脚本、图片等资源的路径中统一会加上额外的路径
        path: path.resolve(__dirname, 'dist'),
        filename: './js/[name].[hash:8].js'
    },
    module: {
        rules: [
            {
                test: /\.html$/,
                use: {
                    loader: 'html-loader',
                    options: {

                    }
                }
            },
            {
                test: /\.js$/,
                // exclude: /node_modules/,
                exclude: path.resolve(__dirname, 'node_modules'), //编译时，不需要编译哪些文件
                //include: path.resolve(__dirname, 'src'),//在config中查看 编译时，需要包含哪些文件
                loader: 'babel-loader',
                query: {
                    presets: ['latest'] //按照最新的ES6语法规则去转换
                }
            },
            {
                test: /\.css$/,
                use: [
                    // {loader: "style-loader"},        //在页面内嵌入css
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            // 这里可以指定一个 publicPath
                            // 默认使用 webpackOptions.output中的publicPath
                            publicPath: '../'
                        }
                    },      //单独抽离css
                    {loader: "css-loader"},
                    {       //自动添加前缀
                        loader: "postcss-loader",
                        options: {
                            plugins: [
                                require("autoprefixer")
                            ]
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 100,
                    name: './img/[name].[hash:7].[ext]',
                }
            },
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),       //删除上次打包文件，默认目录'./dist'
        new copyWebpackPlugin([{        //静态资源输出,将src目录下的assets文件夹复制到dist目录下
            from: path.join(__dirname, "./src/assets"),
            to: path.join(__dirname, "./dist/assets"),
        }]),
        new MiniCssExtractPlugin({
            filename: "./css/[name].[hash:8].css"
        }),
        new OptimizeCssAssetsPlugin(),      //压缩css文件
        new HtmlWebpackPlugin({
            favicon: './src/img/favicon.ico',      //图标
            template: './src/index.html',      //指定要打包的html
            filename:'index.html',       //指定输出路径和文件名
            minify: {       //压缩
                removeComments: true,       //移除HTML中的注释
                collapseWhitespace:true,        //删除空白符与换行符
                removeAttributeQuotes: true        //去除属性引用
            }
        }),
        // new HtmlWebpackPlugin(//打包第二个页面
        //     {
        //         template: './app/src/page/index2.html',
        //         filename:'./page/index2.html'
        //     }
        // )
    ]
};