Authored by ccbikai(👎🏻🍜)

Merge branch 'feature/webpack2' into release/5.5.1

... ... @@ -151,3 +151,4 @@ public/bundle/*
nbproject/*
.DS_Store
.devhost
.happypack/*
... ...
... ... @@ -15,8 +15,8 @@
"debug": "DEBUG=\"express:*\" nodemon -e js,hbs -i public/ app.js",
"lint-js": "eslint -c .eslintrc --cache .",
"lint-css": "stylelint --syntax scss --config .stylelintrc 'public/scss/**/*.css'",
"lint-vue-js": "eslint -c .eslintrc --cache public/vue/**/*.vue",
"lint-vue-css": "stylelint --syntax scss --extract --config .stylelintrc public/vue/**/*.vue",
"lint-vue-js": "eslint -c .eslintrc --cache public/vue",
"lint-vue-css": "stylelint --syntax scss --extract --config .stylelintrc 'public/scss/**/*.vue'",
"precommit": "node lint.js"
},
"license": "MIT",
... ... @@ -63,9 +63,11 @@
"cssnano": "^3.10.0",
"eslint": "^3.16.0",
"eslint-config-yoho": "^1.0.1",
"eslint-loader": "^1.6.3",
"eslint-plugin-html": "^2.0.1",
"extract-text-webpack-plugin": "^2.1.0",
"handlebars-loader": "^1.4.0",
"happypack": "^3.0.3",
"husky": "^0.13.1",
"nodemon": "^1.11.0",
"postcss-assets": "^4.0.1",
... ... @@ -87,6 +89,7 @@
"stylelint": "^7.9.0",
"stylelint-config-yoho": "^1.2.8",
"stylelint-processor-html": "^1.0.0",
"stylelint-webpack-plugin": "^0.7.0",
"vue": "^2.1.10",
"vue-loader": "^11.1.4",
"vue-template-compiler": "^2.1.10",
... ...
... ... @@ -2,16 +2,25 @@
/**
* postcss plugins for both dev and pro
* @parem et Symbol
*/
const psprites = require('postcss-sprites');
const path = require('path');
const precss = require('precss');
const cssnano = require('cssnano');
const autoprefixer = require('autoprefixer');
const postSprites = require('postcss-sprites');
const postImport = require('postcss-import');
const postAssets = require('postcss-assets');
const postCalc = require('postcss-calc');
const postPxtorem = require('postcss-pxtorem');
const postUse = require('postcss-use');
const spritescore = require('postcss-sprites/lib/core');
const config = require('../../package.json');
const distDir = path.join(__dirname, `../dist/${config.name}/${config.version}`);
const dist = {
img: distDir + '/img',
font: distDir + '/font'
}
};
exports.postcssPlugin = (et) => {
let sprites = {
... ... @@ -38,9 +47,9 @@ exports.postcssPlugin = (et) => {
return group ? Promise.resolve(group) : Promise.reject('yoho');
},
hooks: {
onUpdateRule:function(rule, comment, image){
image.spriteUrl += ("?t=" + new Date().getTime());
require('postcss-sprites/lib/core').updateRule(rule, comment, image);
onUpdateRule: function(rule, comment, image) {
image.spriteUrl += ('?t=' + new Date().getTime());
spritescore.updateRule(rule, comment, image);
}
}
},
... ... @@ -74,7 +83,7 @@ exports.postcssPlugin = (et) => {
}
plugins = [
require('postcss-import')({
postImport({
path: [path.join(__dirname, '../scss')],
resolve(id) {
let name = path.basename(id);
... ... @@ -85,29 +94,27 @@ exports.postcssPlugin = (et) => {
return id;
}
}),
require('precss'),
(psprites.default || psprites)(sprites),
require('postcss-assets')(assets),
require('postcss-calc'),
require('postcss-pxtorem')({
precss(),
postSprites(sprites),
postAssets(assets),
postCalc(),
postPxtorem({
rootValue: 40,
unitPrecision: 5, // 保留5位小数字
minPixelValue: 2, // 小于 2 时,不转换
selectorBlackList: [], // 选择器黑名单,可以使用正则
propWhiteList: [] // 属性名称为空,表示替换所有属性的值
}),
require('autoprefixer')({
autoprefixer({
browsers: ['> 1%']
}),
// 可选
require('postcss-use')({
postUse({
modules: ['postcss-clearfix', 'postcss-crip', 'postcss-short', 'postcss-center', 'postcss-position']
})
];
if (et === 'pro') {
plugins.push(require('cssnano')({
plugins.push(cssnano({
safe: true
}));
}
... ...
... ... @@ -5,20 +5,23 @@
*/
'use strict';
const webpack = require('webpack');
const path = require('path');
const _ = require('lodash');
const os = require('os');
const path = require('path');
const scss = require('postcss-scss');
const shelljs = require('shelljs');
const webpack = require('webpack');
const HappyPack = require('happypack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const postcssConfig = require('./postcss.config.js');
const scss = require('postcss-scss');
const entries = {
'index': path.join(__dirname, '../scss/index.css'),
'common': path.join(__dirname, '../scss/common.css'),
'feature': path.join(__dirname, '../scss/feature.css')
index: path.join(__dirname, '../scss/index.css'),
common: path.join(__dirname, '../scss/common.css'),
feature: path.join(__dirname, '../scss/feature.css')
};
const happyThreadPool = HappyPack.ThreadPool({ // eslint-disable-line
size: os.cpus().length
});
// 构建各模块子页面JS。生成规则module.page.js
shelljs.ls(path.join(__dirname, '../js/**/*.page.js')).forEach((f) => {
... ... @@ -67,7 +70,7 @@ module.exports = (env) => {
test: /\.js$/,
exclude: [/node_modules/],
use: [{
loader: 'babel-loader'
loader: 'happypack/loader?id=js'
}]
}, {
test: /\.css$/,
... ... @@ -89,22 +92,19 @@ module.exports = (env) => {
}, {
test: /\.hbs$/,
use: [{
loader: 'handlebars-loader',
options: {
helperDirs: [
path.join(__dirname, '../js/common/helpers')
],
partialDirs: [
path.join(__dirname, '../../doraemon/views/partial')
]
}
loader: 'happypack/loader?id=hbs',
}]
}]
},
resolve: {
modules: ['node_modules', './public/vue', './public/hbs', './public/scss', './public/js'],
modules: [
path.join(__dirname, '../../node_modules'),
path.join(__dirname, '../vue'),
path.join(__dirname, '../hbs'),
path.join(__dirname, '../scss'),
path.join(__dirname, '../js')
],
alias: {
js: path.join(__dirname, '../js/'),
vue: 'vue/dist/vue.js'
}
},
... ... @@ -112,6 +112,26 @@ module.exports = (env) => {
children: false
},
plugins: [
new HappyPack({
id: 'js',
threadPool: happyThreadPool,
loaders: ['babel-loader'],
}),
new HappyPack({
id: 'hbs',
threadPool: happyThreadPool,
loaders: [{
loader: 'handlebars-loader',
options: {
helperDirs: [
path.join(__dirname, '../js/common/helpers')
],
partialDirs: [
path.join(__dirname, '../../doraemon/views/partial')
]
}
}]
}),
new ExtractTextPlugin('[name].css'),
new webpack.optimize.CommonsChunkPlugin({
name: 'libs',
... ... @@ -123,5 +143,5 @@ module.exports = (env) => {
'window.jQuery': 'yoho-jquery'
})
]
}
};
};
... ...
... ... @@ -2,11 +2,22 @@
const path = require('path');
const webpack = require('webpack');
const StyleLintPlugin = require('stylelint-webpack-plugin');
let baseConfig = require('./webpack.base.config.js');
baseConfig = baseConfig('dev');
baseConfig.devtool = '#eval';
baseConfig.devtool = '#inline-source-map';
baseConfig.output.publicPath = 'http://localhost:5001/';
baseConfig.module.rules.push({
enforce: 'pre',
test: /(\.js|\.vue)$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
cache: true,
formatter: require('eslint/lib/formatters/codeframe')
}
});
baseConfig.devServer = {
host: '0.0.0.0',
port: 5001,
... ... @@ -14,8 +25,6 @@ baseConfig.devServer = {
publicPath: baseConfig.output.publicPath,
hot: true,
inline: true,
// quiet: true,
// clientLogLevel: 'error',
compress: true,
stats: {
colors: true,
... ... @@ -24,9 +33,12 @@ baseConfig.devServer = {
headers: {
'Access-Control-Allow-Origin': '*'
}
}
};
baseConfig.plugins.push(
new StyleLintPlugin({
files: ['public/scss/**/*.css', 'public/vue/**/*.vue'],
}),
new webpack.HotModuleReplacementPlugin()
);
... ...
... ... @@ -11,8 +11,8 @@ let baseConfig = require('./webpack.base.config.js');
// cope img font
shelljs.mkdir('-p', distDir);
shelljs.cp('-R', path.join(__dirname,'../img/'), distDir);
shelljs.cp('-R', path.join(__dirname,'../font/'), distDir);
shelljs.cp('-R', path.join(__dirname, '../img/'), distDir);
shelljs.cp('-R', path.join(__dirname, '../font/'), distDir);
baseConfig = baseConfig('pro');
baseConfig.output.path = distDir;
... ...