mavon-editor/webpack/webpack.base.js

Vue markdown editor

/**
 * @Author: HuaChao Chen <CHC>
 * @Date:   2017-05-07T20:11:11+08:00
 * @Email:  chenhuachaoxyz@gmail.com
 * @Filename: webpack.base.js
 * @Last modified by:   chc
 * @Last modified time: 2017-11-26T22:25:40+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');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var fs = require("fs");
// var postcss = require('postcss-loader')

const extractCSS = new ExtractTextPlugin('css/[name].css');
module.exports = {
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    postcss: [
                        require('autoprefixer')({
                            browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8']
                        })
                    ]
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                // exclude: /.*node_modules((?!auto-textarea).)*$/
                // exclude: /node_modules/
                include: [
                    path.resolve(__dirname, '../src'),
                    fs.realpathSync('node_modules/auto-textarea')
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                loader: 'file-loader',
                options: { name: '[name].[ext]?[hash]' }
            },
            { test: /\.(woff|ttf|eot|svg)/, loader: 'file-loader?name=font/[name].[ext]&publicPath=../' },
            {
                test: /\.styl$/,
                loader: 'style-loader!css-loader!stylus-loader'
            },
            {
                // css代码分割打包
                test: /\.css$/,
                // exclude: /node_modules/,
                use: extractCSS.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: '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: /\.md$/,
                loader: 'raw-loader'
            },{
                test: /\.less$/,
                loader: 'style-loader!css-loader!less-loader'
            }
        ]
    },
    performance: {
        hints: false
    },
    plugins: [
        // 分离css
        extractCSS,
        // 分离js可能引入的css的chunkhash计算
        new WebpackMd5Hash(),
        // 对css文件进行压缩
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorOptions: { discardComments: { removeAll: true } },
            canPrint: true
        }),
        new CopyWebpackPlugin([{
            from: path.resolve(__dirname, '../resources/highlight.js-9.12.0'),
            to: path.resolve(__dirname, '../dist/highlightjs')
        }, {
            from: path.resolve(__dirname, '../resources/markdown'),
            to: path.resolve(__dirname, '../dist/markdown')
        }, {
            from: path.resolve(__dirname, '../node_modules/katex/dist'),
            to: path.resolve(__dirname, '../dist/katex')
        }])
    ]
}