webpack 1.x 配合npm scripts管理多站点

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

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

npm 添加淘宝镜像

你懂得

vim ~/.npmrc
registry = 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.js

var 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.js
var 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"
  }
}