webpack+sass+babel+postcss配置

手动构建Webpack开发环境
WebPack基础教程
Webpack开发环境配置
webpack+sass+babel+postcss配置
Webpack多页面配置

webpack+sass+babel+postcss配置

webpack.config.js配置

const path = require('path');
//JS与CSS分割插件
const ExtractPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');
//HTML代码生成插件
const HTMLPlugin = require("html-webpack-plugin");
//JS代码压缩插件
const uglifyjsPlugin = require("uglifyjs-webpack-plugin");
 
//根据启动参数去判断是否等于development,如果是就是开发环境，如果不是，就是生产环境
var isDev = process.env.NODE_ENV === "development" ? true : false;
 
var config = {
    entry: ["babel-polyfill", path.join(__dirname, "./src/main.js")],
    output: {
        path: path.join(__dirname, "./dist"),
        filename: "bundle.js"
    },
    module: {
        rules: [{
                test: /\.js$/,
                use: ["babel-loader"],
                include: path.join(__dirname, "./src")
            },
            {
                test: /\.(jpg|jpeg|png|gif|svg|bmp)$/,
                use: [{
                    loader: "url-loader",
                    options: {
                        limit: 1000,
                        name: "[name]-aaa.[ext]"
                    }
                }]
            }
        ]
    },
    plugins: [
        new HTMLPlugin({
            template: "index.html",
            inject: true
        }),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: isDev ? '"development"' : '"production"'
            }
        })
    ]
}
if (isDev) {
    config.devServer = {
        host: "0.0.0.0",
        port: 8888,
        overlay: {
            error: true
        }
    }
    config.module.rules.push({
        test: /\.css$/,
        use: [
            "style-loader",
            "css-loader"
        ]
    }, {
        test: /\.scss$/,
        use: [
            "style-loader",
            "css-loader",
            {
                loader: "postcss-loader",
                options: {
                    config: {
                        path: path.join(__dirname, "./postcss.config.js")
                    }
                }
            },
            "sass-loader"
        ]
    })
} else {
    config.module.rules.push({
        test: /\.scss$/,
        use: ExtractPlugin.extract({
            fallback: "style-loader",
            use: [{
                    loader: "css-loader",
                    options: {
                        minimize: true
                    }
                },
                {
                    loader: "postcss-loader",
                    options: {
                        config: {
                            path: path.join(__dirname, "./postcss.config.js")
                        }
                    }
                },
                "sass-loader"
            ]
        })
    }, {
        test: /\.css$/,
        use: ExtractPlugin.extract({
            fallback: "style-loader",
            use: [
                "style-loader",
                {
                    loader: "postcss-loader",
                    options: {
                        config: {
                            path: path.join(__dirname, "./postcss.config.js")
                        }
                    }
                },
                {
                    loader: "css-loader",
                    options: {
                        minimize: true
                    }
                }
            ]
        })
    });
    config.plugins.push(
        new uglifyjsPlugin(),
        new ExtractPlugin("style.[contentHash:8].css") //指定生成的文件的名称
    );
}
 
module.exports = config;

package.json配置项

{
  "name": "webpack04",
  "version": "1.0.0",
  "description": "webpack+css+sass+posscss",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^8.2.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-0": "^6.24.1",
    "cross-env": "^5.1.4",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.8.3",
    "postcss-loader": "^2.1.3",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.20.3",
    "uglifyjs-webpack-plugin": "^1.2.4",
    "url-loader": "^1.0.1",
    "webpack": "^3.11.0"
  },
  "browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]
}
 

postcss.config.js配置

module.exports = {
    "plugins": {
        // "postcss-import": {},
        // "postcss-url": {},
        // to edit target browsers: use "browserslist" field in package.json
        "autoprefixer": {}
    }
}

.babelrc配置

{
    "presets": [
        "env", "stage-0"
    ]
}