2.1 webpack 之 模块拆分打包配置 附源码

·  阅读 470

    在前面几节,基本已经介绍完了webpack的基本用法,可以去总目录阅读对应的章节。但是有个问题我们打包的js文件都是只有一个index.js,当项目庞大的时候,这个js异常大,首次加载的时候非常耗时!
    好了有了需求我们就得去找解决方法!

一、wepack 打包多js文件

这里我们就给自己构建一个需求!
入参:两个html(index.html,other.html),两个js(home.js,other.js),两个css(index.css,other.css)
出参:index.js拆分输出,并且index.html引用home.js,other.html引用other.js。

  • 1.先创建这几个文件吧

index.html 中多加了一个跳转代码<a href="./other.html">go other html</a>
index.js 代码

require('./index.css')
console.log('hello home')
复制代码

other.js 代码

require('./other.css')
console.log('hello other')
复制代码

index.css 代码

body{
    background: rebeccapurple;
}
复制代码

other.css 代码

body{
    background: aqua;
}
复制代码

此时我们直接执行npm run build (这里说明下每个小节都是基于上个小节讲解的)。可以完成编译,但是还是输出了一个js!
有的朋友会说,你都没有告诉webpack怎么输出,当然还是原来的!所以我们还需要配置下项目的webpack.config.custom.js文件

  • 1.配置多入口
   entry: {
        home:'./src/index.js',
        other:'./src/other.js'
    }, //入口
复制代码
  • 2.配置多输出
 output: {
        filename: '[name].js', // [name] 指的是多个入口,这里指 home other
        path: path.resolve(__dirname,'dist'),  // 路径必须是一个绝对路径
    },
复制代码
  • 3.html 插件指定引用js配置
new HtmlWebpackPlugin({
            template: "./src/index.html",
            filename: "index.html",
            minify: {
                 removeAttributeQuotes:false, // 删除引号
                 collapseWhitespace:false, // 去除空格
                // hash:true
            },
            chunks: ['home'] // 指定引用home
        }),
new HtmlWebpackPlugin({
            template: "./src/other.html",
            filename: "other.html",
            minify: {
                removeAttributeQuotes:false, // 删除引号
                collapseWhitespace:false, // 去除空格
                // hash:true
            },
            chunks: ['other'] // 指定引用 other,两个都要就这么写['other','home']
        }),
复制代码
  • 4.css 配置多输出
new MiniCssExtractPlugin({
            filename:'[name].css', //[name] 指的是多个入口,会输出js同名的css
            chunkFilename:'[id].css'
        }),
复制代码

现在我们在执行npm run build

看上去已经ok了,我们在去浏览器加载下index.html,瞅瞅效果哈!

在点击 go other html

源码下载

创建文件夹,cd至已创建文件夹,执行 git clone https://gitee.com/dolan_ge/webpack.git -b webpack_multi_module

进入webpack工程目录,执行 npm install -D

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改