webpack操练

{
  "name": "MyDemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config webpack.prod.js",
    "dev": "webpack-dev-server --open --config webpack.dev.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^9.7.3",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^5.0.2",
    "glob": "^7.1.6",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.9.4",
    "postcss-loader": "^3.0.0",
    "purify-css": "^1.2.5",
    "purifycss-webpack": "^0.7.0",
    "react": "^16.6.0",
    "react-dom": "^16.6.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^3.0.0",
    "webpack": "^4.23.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10",
    "webpack-merge": "^4.1.4"
  }
}

// webpack.common.js
const path = require(‘path‘);  // 路径处理模块
const ExtractTextPlugin = require(‘extract-text-webpack-plugin‘) //引入分离插件
const webpack = require(‘webpack‘);  // 这个插件不需要安装，是基于webpack的，需要引入webpack模块
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘); // 引入HtmlWebpackPlugin插件

module.exports = {
    entry: {
        index: path.join(__dirname, "/src/index.js"),
        two: path.join(__dirname, "/src/two.js")
    }, 
    output: {
        path: path.join( __dirname, "/dist"), //打包后的文件存放的地方
        filename: "[name].js" //打包后输出文件的文件名
    },
    module: {
        rules: [
            {
                test: /\.css$/,   // 正则匹配以.css结尾的文件
                use: ExtractTextPlugin.extract({  // 这里我们需要调用分离插件内的extract方法
                    fallback: ‘style-loader‘,  // 相当于回滚，经postcss-loader和css-loader处理过的css最终再经过style-loader处理
                    use: [‘css-loader‘, ‘postcss-loader‘],
                    publicPath: ‘../‘  // 给背景图片设置一个公共路径
                })
            },
            {
                test: /\.(png|jpg|svg|gif)$/,  // 正则匹配图片格式名
                use: [
                    {
                        loader: ‘url-loader‘,
                        options: {
                            limit: 1000,  // 限制只有小于1kb的图片才转为base64，例子图片为1.47kb,所以不会被转化
                            outputPath: ‘images‘  // 设置打包后图片存放的文件夹名称
                        }
                    }
                ]
            },
            {
                test: /\.(scss|sass)$/,   // 正则匹配以.scss和.sass结尾的文件
                use: [‘style-loader‘, ‘css-loader‘, ‘sass-loader‘]  // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的
            },
            {                             // jsx配置
                test: /(\.jsx|\.js)$/,   
                use: {                    // 注意use选择如果有多项配置，可写成这种对象形式
                    loader: "babel-loader"
                },
                exclude: /node_modules/   // 排除匹配node_modules模块
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin(‘版权所有，翻版必究‘),  // new一个插件的实例 
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "/src/index.template.html")// new一个这个插件的实例，并传入相关的参数
        }),
        new webpack.HotModuleReplacementPlugin(),
        new ExtractTextPlugin(‘css/index.css‘) // 将css分离到/dist文件夹下的css文件夹中的index.css
    ]
}

// webpack.dev.js
const merge = require(‘webpack-merge‘);  // 引入webpack-merge功能模块
const common = require(‘./webpack.common.js‘); // 引入webpack.common.js

module.exports = merge(common, {   // 将webpack.common.js合并到当前文件
    devServer: {
        contentBase: "./dist",   // 本地服务器所加载文件的目录
        port: "8088",  // 设置端口号为8088
        inline: true,  // 文件修改后实时刷新
        historyApiFallback: true, //不跳转
        hot: true     //热加载
    }
})

// webpack.prod.js
const merge = require(‘webpack-merge‘);
const common = require(‘./webpack.common.js‘);
const CleanWebpackPlugin = require(‘clean-webpack-plugin‘); // 引入CleanWebpackPlugin插件

const path = require(‘path‘);
const PurifyCssWebpack = require(‘purifycss-webpack‘); // 引入PurifyCssWebpack插件
const glob = require(‘glob‘);  // 引入glob模块,用于扫描全部html文件中所引用的css

module.exports = merge(common, { // 将webpack.common.js合并到当前文件
    devtool: ‘source-map‘,  // 会生成对于调试的完整的.map文件，但同时也会减慢打包速度
    plugins: [
        new CleanWebpackPlugin([‘dist‘]),  // 所要清理的文件夹名称
        new PurifyCssWebpack({
            paths: glob.sync(path.join(__dirname, ‘src/*.html‘)) // 同步扫描所有html文件中所引用的css
        })
    ]
})

{
    "presets": ["env", "react"]
}

// postcss.config.js
module.exports = {
    plugins: [
        require(‘autoprefixer‘)  // 引用autoprefixer模块
    ]
}