需求场景: 希望通过一个webpack文件夹管理多个站点的打包流程.

假设现在我要为站点domain配置打包流程.

npm 添加淘宝镜像

你懂得

vim ~/.npmrcregistry = https://registry.npm.taobao.org

Mac 启动mysql

mysql.server start

mysql -uroot -p

工程目录结构

1. 所有站点共用的目录为css和js, 这两个文件夹存放公共的css和js模块.
2. 打包出来的文件输出在dist/xxx文件夹下
3. 各个站点的webpack配置文件和入口文件放在www/xxx文件夹下.

.├── css│   ├── bar.css│   ├── bar.scss│   └── foo.scss├── dist│   └── domain├── js│   ├── bar.coffee│   └── foo.js├── node_modules│├── package.json├── webpack.config.js└── www    └── domain        ├── entry.js        └── webpack.config.js

管理domain站点

命令: webpack --config www/domain/webpack.config.js

// ./www/domain/webpack.config.jsvar webpack = require("webpack");var path = require('path');module.exports = {        resolve: {      root: [        path.resolve('./css'),        path.resolve('./js'),      ],      extensions: ["", ".js", ".coffee"],    },        entry: "./www/domain/entry.js",        output: {        path: 'dist/domain',        publicPath: '/static/',         filename:  "domain.[hash].js",     },        module: {                        loaders: [            {                test: /\.vue$/,                loader: 'vue',            },            {                 test: /\.css$/,                 loaders: ["style", "css"],            },             {                 test: /\.scss$/,                 loaders: ["style", "css", "sass"],            },             {                 test: /\.coffee$/,                 loader: "coffee-loader",            },         ],     },    };

实际上, webpack.config.js文件也可以放在根目录下, 并且通过命令行向它传入一些参数

这个时候命令可以等效为:webpack --domain domain

// ./webpack.config.jsvar webpack = require("webpack");var path = require('path');var argv = require('yargs').argv;var domain = argv.domain || 'default';module.exports = {        resolve: {      root: [        path.resolve('./css'),        path.resolve('./js'),      ],      extensions: ["", ".js", ".coffee"],    },        entry: "./www/" + domain + "/entry.js",        output: {        path: 'dist/' + domain,        publicPath: '/static/',         filename: domain + ".[hash].js",     },        externals: {        // "jquery": "$",     },         plugins: [        // new webpack.ProvidePlugin({$:'jquery', jQuery:'jquery'}),    ],         module: {                // preLoaders: [        //     {        //         test: /\.js$/,         //         loader: 'eslint',         //         exclude: [/node_modules/],         //     },        // ],                loaders: [            {                test: /\.vue$/,                loader: 'vue',            },            {                 test: /\.css$/,                 loaders: ["style", "css"],            },             {                 test: /\.scss$/,                 loaders: ["style", "css", "sass"],            },             {                 test: /\.coffee$/,                 loader: "coffee-loader",            },                         // {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},            // {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},            // {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},            // {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},        ],     },    };

全局模块

npm install -g webpack coffee-script

本地模块

{  "name": "pack",  "version": "1.0.0",  "scripts": {    "domain": "webpack --config www/domain/webpack.config.js"  },  "devDependencies": {    "coffee-loader": "^0.7.2",    "coffee-script": "^1.11.1",    "crypto-js": "^3.1.8",    "css-loader": "^0.25.0",    "file-loader": "^0.9.0",    "node-sass": "^3.11.2",    "sass-loader": "^4.0.2",    "style-loader": "^0.13.1",    "url-loader": "^0.5.7",    "vue": "^2.0.5",    "vue-loader": "^9.8.1",    "webpack": "^1.13.3"  }}