美文网首页
webpack基础知识 2021-03-30

webpack基础知识 2021-03-30

作者: 努力的小凡子 | 来源:发表于2021-03-30 17:00 被阅读0次

Webpack的定位

Webpack最初是为Node设计的一款打包工具,把一个Node代码打包成一个浏览器可用的代码。所以webpack是基于JS打包成一个js文件,再手动的在html文件里引用。Webpack可以帮助我们做多文件合并,在合并的过程中,调用各种各样的loader和plugin去控制合并的一些规则和对文本的一些转换。

安装

webpack 

webpack-cli:提供webpack命令 npm install -g webpack-cli

核心概念

entry(入口)

output(输出)

loader:loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效模块,以供应用程序使用。

plugin(插件):loader 用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量。

mode (模式): development、production、none

browser compatibility (浏览器兼容性):不支持IE8及以下版本

environment (环境):webpack5运行于Node.js v10.13.0+版本

示例

```

const HtmlWebpackPlugin=require('html-webpack-plugin');// 通过 npm 安装

const webpack=require('webpack');// 用于访问内置插件

module.exports={

    entry:'./path/to/my/entry/file.js',

    output:{

        path:path.resolve(__dirname,'dist'),

        filename:'my-first-webpack.bundle.js',

    },

    module:{

        rules:[

            {test:/\.txt$/,use:'raw-loader'}

        ],

    },

    plugins:[

        new HtmlWebpackPlugin({template:'./src/index.html'})

    ],

    mode:'production',

};

```

相关文章

网友评论

      本文标题:webpack基础知识 2021-03-30

      本文链接:https://www.haomeiwen.com/subject/alzwhltx.html