157 lines
6.6 KiB
JavaScript
157 lines
6.6 KiB
JavaScript
/**
|
||
* @Author: HuaChao Chen <CHC>
|
||
* @Date: 2017-05-04T23:21:48+08:00
|
||
* @Email: chenhuachaoxyz@gmail.com
|
||
* @Filename: webpack.dev.js
|
||
* @Last modified by: CHC
|
||
* @Last modified time: 2017-05-06T22:00:44+08:00
|
||
* @License: MIT
|
||
* @Copyright: 2017
|
||
*/
|
||
|
||
var path = require('path');
|
||
var webpack = require('webpack');
|
||
var HtmlWebpackPlugin = require('html-webpack-plugin');
|
||
var ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||
var WebpackMd5Hash = require('webpack-md5-hash');
|
||
// 该插件是对“webpack-md5-hash”的改进：在主文件中获取到各异步模块的hash值，然后将这些hash值与主文件的代码内容一同作为计算hash的参数，这样就能保证主文件的hash值会跟随异步模块的修改而修改。
|
||
// var WebpackSplitHash = require('webpack-split-hash');
|
||
// 压缩css
|
||
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
||
|
||
const extractCSS = new ExtractTextPlugin('css/[name].[contenthash:8].css');
|
||
|
||
module.exports = {
|
||
entry: {
|
||
index: './src/dev/index.js',
|
||
vue: ['vue']
|
||
},
|
||
output: {
|
||
path: path.resolve(__dirname, './dist'),
|
||
// publicPath: '/dist/',
|
||
filename: 'js/[name].[chunkhash:8].js',
|
||
chunkFilename: 'js/[name].[chunkhash:8].js'
|
||
},
|
||
module: {
|
||
rules: [{
|
||
test: /\.vue$/,
|
||
loader: 'vue-loader'
|
||
},
|
||
{
|
||
test: /\.js$/,
|
||
loader: 'babel-loader',
|
||
exclude: /node_modules/
|
||
},
|
||
{
|
||
test: /\.(png|jpg|gif)$/,
|
||
loader: 'file-loader',
|
||
options: { name: '[name].[ext]?[hash]' }
|
||
},
|
||
{ test: /\.(woff|ttf|eot|svg)/, loader: 'file-loader?name=font/[name].[hash:8].[ext]&publicPath=../' },
|
||
{
|
||
// css代码分割打包
|
||
test: /\.css$/,
|
||
// exclude: /node_modules/,
|
||
use: extractCSS.extract({
|
||
fallback: 'style-loader',
|
||
use: [
|
||
'css-loader',
|
||
{
|
||
loader: 'postcss-loader',
|
||
options: {
|
||
plugins: function() {
|
||
return [
|
||
// 允许在子中定义要放在最顶层的样式
|
||
require('postcss-atroot')({}),
|
||
// 允许定义样式函数
|
||
require('postcss-mixins')({}),
|
||
// import插件
|
||
require('postcss-nested-import')({}),
|
||
// 类sass-import插件，但是没法嵌套导入
|
||
// require('postcss-partial-import')({}),
|
||
// 嵌套解析插件
|
||
require('postcss-nested')({}),
|
||
// 可以通过引用方式引用父/其他样式的属性值
|
||
require('postcss-nesting')({}),
|
||
// 允许自定义选择器别名
|
||
require('postcss-custom-selectors')({}),
|
||
// 可自定义属性块别名，后面可扩充
|
||
require('postcss-extend')({}),
|
||
// 允许类sass的变量定义，for和each语法
|
||
require('postcss-advanced-variables')({}),
|
||
// 支持颜色函数color
|
||
require('postcss-color-function')({}),
|
||
// 支持media的变量定义
|
||
require('postcss-custom-media')({}),
|
||
// 支持属性自定义
|
||
require('postcss-custom-properties')({}),
|
||
// 支持media的最大最小值定义 可以通过类似@media screen and (width >= 500px) and (width <= 1200px){}来书写
|
||
require('postcss-media-minmax')({}),
|
||
// 支持通过@引用本属性块的属性
|
||
require('postcss-property-lookup')({}),
|
||
// maches函数，p:matches(:first-child, .special)解析为p:first-child, p.special
|
||
require('postcss-selector-matches')({}),
|
||
// 支持not解析，p:not(:first-child, .special)解析为p:not(:first-child), p:not(.special)
|
||
require('postcss-selector-not')({})
|
||
];
|
||
}
|
||
}
|
||
}
|
||
]
|
||
})
|
||
},{
|
||
test: /\.styl$/,
|
||
loader: 'style-loader!css-loader!stylus-loader'
|
||
},{
|
||
test: /\.md$/,
|
||
loader: 'raw-loader'
|
||
}
|
||
]
|
||
},
|
||
resolve: {
|
||
alias: {
|
||
'vue$': 'vue/dist/vue.esm.js'
|
||
}
|
||
},
|
||
devServer: {
|
||
historyApiFallback: true,
|
||
disableHostCheck: true,
|
||
host: '0.0.0.0',
|
||
port: '9090'
|
||
// hot: true,
|
||
// noInfo: true
|
||
},
|
||
performance: {
|
||
hints: false
|
||
},
|
||
plugins: [
|
||
new webpack.optimize.CommonsChunkPlugin({
|
||
names: ['vue', 'common'],
|
||
filename: 'js/[name].[chunkhash:8].js',
|
||
minChunks: Infinity
|
||
}),
|
||
new HtmlWebpackPlugin({
|
||
filename: 'index.html',
|
||
template: 'src/dev/index.html',
|
||
inject: true,
|
||
hash: false,
|
||
chunks: ['common', 'vue', 'index']
|
||
}),
|
||
// new webpack.HotModuleReplacementPlugin(),
|
||
// new ExtractTextPlugin("css/[name].[contenthash:8].css"),
|
||
extractCSS,
|
||
// 分离js可能引入的css的chunkhash计算
|
||
new WebpackMd5Hash(),
|
||
// 对css文件进行压缩
|
||
new OptimizeCssAssetsPlugin({
|
||
assetNameRegExp: /\.css$/g,
|
||
cssProcessor: require('cssnano'),
|
||
cssProcessorOptions: { discardComments: { removeAll: true } },
|
||
canPrint: true
|
||
})
|
||
// new WebpackSplitHash(),
|
||
// new ExtractTextPlugin({ filename: 'bundle.css', disable: false, allChunks: true }),
|
||
],
|
||
devtool: '#eval-source-map'
|
||
}
|