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"
  }
}