webpack 4+ 学习（3）

最新推荐文章于 2020-05-28 10:24:00 发布

那后来怎样了

最新推荐文章于 2020-05-28 10:24:00 发布

阅读量101

点赞数

管理输出

在 src 下新建 print.js 文件

  |- package.json
  |- webpack.config.js
  |- /dist
  |- /src
    |- index.js
+   |- print.js
  |- /node_modules

src/print.js

export default function printMe() {
  console.log('I get called from print.js!');
}

修改 src/index.js

import wx from './wx.png'
import './style.css'
import printMe from './print'

window.onload = function () {
    var btn = document.getElementById('btn')
    btn.addEventListener('click',printMe)
}

修改 dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello webpack</title>
    <script src="print.bundle.js"></script>
    <script src="app.bundle.js"></script>
</head>
<body>
    <div class="hello">
        Hello Webpack 4
    </div>
    <button id="btn">点击有惊喜！</button>
</body>
</html>

重新修改 webpack.config.js 配置

const path = require('path');

module.exports = {
    entry: {
        app : './src/index.js',
        print : './src/print.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules : [
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test :/\.(png|svg|jpg|gif)$/,
                use : [
                    'file-loader'
                ]
            }
        ]
    }
};

执行命令 => npm run build 。此时会发现 dist 文件下生成了 app.bundle.js 和 print.bundle.js，这与在 index.html 文件中指定的文件名称相对应。但如果更改了一个入口起点的名称，或添加了一个新的名称，生成的包将被重命名在一个构建中，但是 index.html 文件仍然会引用旧的名字，这时使用 HtmlWebpackPlugin 解决问题

设定 HtmlWebpackPlugin

安装插件，调整 webpack.config.js 文件

npm install --save-dev html-webpack-plugin

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: {
        app : './src/index.js',
        print : './src/print.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin ({
            title : 'Output Management'
        })
    ],
    module: {
        rules : [
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test :/\.(png|svg|jpg|gif)$/,
                use : [
                    'file-loader'
                ]
            }
        ]
    }
};

虽然在 dist/ 文件夹已经有 index.html 文件，然后 HtmlWebpackPlugin 还是会默认生成 index.html 文件。也就是说，它会用新生成的 index.html 文件替换原来的文件。

执行命令 => npm run build。

html-webpack-plugin 库

npm 查询包

清理 /dist 文件夹

由于过去的代码遗留，导致我们的 /dist 文件夹相当杂乱。webpack 会生成文件，然后将这些文件放置在 /dist 文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。所以，在每次构建前清理 /dist 文件夹，是比较推荐的做法，因此只会生成用到的文件。

clean-webpack-plugin 是一个比较普及的管理插件

npm install clean-webpack-plugin --save-dev

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
    entry: {
        app : './src/index.js',
        print : './src/print.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin ({
            title : 'Output Management',
            template : './src/index.html'
        })
    ],
    module: {
        rules : [
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test :/\.(png|svg|jpg|gif)$/,
                use : [
                    'file-loader'
                ]
            }
        ]
    }
};

此时 /dist 中只有构建后生成的文件

那后来怎样了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack 4+ 学习（3）

管理输出在 src 下新建 print.js 文件 |- package.json |- webpack.config.js |- /dist |- /src |- index.js+ |- print.js |- /node_modulessrc/print.jsexport default function printMe() { con...
复制链接

扫一扫