zweizhao.github.io

项目,文章,随笔,博客,Markdown,个人网站,人生感悟。

View on GitHub
const path = require('path'); 
const webpack = require('webpack'); 
function resolve(dir) { 
    return path.join(__dirname, '..', dir) 
} 
// 打包 html 模板文件到 html 文件的插件,自动填充生成的 js 文件 
const HtmlWebpackPlugin = require('html-webpack-plugin') 
module.exports = { 
    // 入口 js,可以多个 
    // entry: {app: ['babel-polyfill', './src/main.js']}, 
    entry: ['./src/main.js'], 
    // 打包输出费配置 
    output: { 
        path: __dirname + '/dist', 
        filename: 'js/app.js', 
        // publicPath : '/' 
    }, 
    // webpack-dev-server 配置,具体参阅官网 
    devServer: { 
        contentBase: './dist', 
        port: 8913, 
        open: true, 
        host: '0.0.0.0', 
        historyApiFallback: true, 
        hot: true, 
        disableHostCheck: true, 
    }, 
    // 引用到的模块配置 
    module: { 
        rules: [ 
            { 
                test: /\.js$/, 
        /** 
         * 注意,use 是 webpack 4.0 之后的参数,将之前的与 test 平级的参数放到了 use 下面,与此架构有关的内容如此,其余更新参阅官网 
         */ 
                use: [ 
                    { 
                        loader: 'babel-loader' 
                    }, 
                    { 
                        loader: 'eslint-loader', 
                        options: { 
                            // formatter: require('eslint-friendly-formatter') 
                            include: [resolve('src')], 
                            enforce: 'pre', 
                        } 
                    }, 
 
                ] 
            }, 
            { 
                test: /\.vue$/, 
                use: { 
                    loader: 'vue-loader', 
                    options: { 
                        sourceMap: 'source-map' 
                    } 
                } 
            }, 
            { 
                test: /\.(png|gif|jpe?g)$/, 
                use: { 
                    loader: 'url-loader', 
                    // 配置静态资源,这里图片,下面那个字体一样处理 
                    query: { 
            /** 
             * limit 单位 byte,大于这个设定的静态资源打包到 name 字段对应的文件夹下方 
             * 小于这个设定值的直接打包为 base64 文本使用 
             */ 
                        limit: 1, // 所有图片不做压缩处理 
                        name: 'static/img/[name].[hash].[ext]' 
                    } 
                } 
            }, 
            { 
                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, 
                use: { 
                    loader: 'url-loader', 
                    query: { 
                        limit: 1,// 所有字体资源也不做压缩处理 
                        name: 'static/font/[name].[hash].[ext]' 
                    } 
                } 
            }, 
            { 
                test: /\.css$/, 
                use: [ 
                    { 
                        loader: 'style-loader' 
                    }, 
                    { 
                        loader: 'css-loader' 
                    } 
                ] 
            } 
        ] 
    }, 
    resolve: { 
        extensions: ['.js', '.vue', '.json'], 
        alias: { 
            src: path.resolve(__dirname, 'src'), 
            static: path.resolve(__dirname, 'src/static'), 
            img: path.resolve(__dirname, 'src/static/img'), 
            icon: path.resolve(__dirname, 'src/static/icon'), 
            page: path.resolve(__dirname, 'src/page'), 
            core: path.resolve(__dirname, 'src/page/core'), 
            component: path.resolve(__dirname, 'src/component'), 
            common: path.resolve(__dirname, 'src/page/common'), 
            mixin: path.resolve(__dirname, 'src/mixin'), 
            api: path.resolve(__dirname, 'src/config/api'), 
            // 'vue$': 'vue/dist/vue.esm.js', 
            '@': resolve('src'), 
            'assets': resolve('src/assets'), 
        } 
    }, 
    externals: {}, 
    plugins: [ 
        new webpack.HotModuleReplacementPlugin(), 
        // 模板与输入文件名(路径一起) 
        new HtmlWebpackPlugin({ 
            template: 'src/index.html', 
            filename: 'index.html' 
        }), 
        // new webpack.DllReferencePlugin({ 
        //   context: __dirname, 
        //   manifest: require('./dist/vendors-manifest.json') 
        // }) 
    ] 
}