首页
学习
活动
专区
圈层
工具
发布

webpack打包原理入门探究(五)loader初探(二)

起初为什么会想要学习 webpack 打包原理,只是因为好奇心发作,由于在工作中,我有处理过项目的首屏加载速度优化的过程,虽然但是是解决了加载问题,也对那些 loader 甚是一脸懵逼,于是上周五下定决心要研究一下 webpack 原理,研究了 vue 几个常见的 组件,创建了一个 kui 组件库

webpack打包原理入门探究(五)loader初探(一)

webpack打包原理入门探究(四)插件探究(下)

webpack打包原理入门探究(四)插件探究(上)

webpack打包原理入门探究(四)插件探究(上)

webpack打包原理入门探究(三)入口探究

webpack打包原理入门探究(二)基本配置

webpack打包原理入门探究(一)

对 ES6 的打包优化,添加 include exclude 配置,提高加载速度

代码语言:javascript
复制
let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin')
function resolve(o) {
    return path.resolve(__dirname, o)
}
module.exports = {
    entry: resolve('src/app.js'), // 指定入口文件
    output: {
        path: resolve('dist'),
        // filename: '[name]-[hash].js'
        filename: "js/[name].bundle.js",
        // publicPath: ''
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: resolve('node_modules'), //指定排除的范围,
                include: resolve('src')
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            // filename: "index-[hash].html",
            // filename: 'index-[chunkhash].html',
            filename: "index.html", // 生成 dist/a.html
            template: 'index.html', // 指定根目录下的 index.html
            inject: 'body',
        })
    ]
}
下一篇
举报
领券