Webpack

最新推荐文章于 2025-04-14 17:26:21 发布

loringray

最新推荐文章于 2025-04-14 17:26:21 发布

阅读量203

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack

本文链接：https://blog.youkuaiyun.com/loringray/article/details/103446881

webpack 专栏收录该内容

2 篇文章

订阅专栏

1、需要打包的原因？

（1）、模块化；
（2）、优化加载速度；
（3）、使用新的开发模式

2、webpack 有什么特点？

与其它的比较：
required JS 支持 AMD
CommonJS => Node.js （一般是服务端）

npm 成为现在最大的js 模块化管理库

webpack的特点：
（1）、同时支持CommonJs 与 AMD；
（2）、一切都可以打包；
（3）、可以分模块打包；

webpack 配置文件参数：
entry: 配置入口资源；
output：配置编译后的资源；
module：资源处理；
resolve：配置资源别名/扩展名等
plugins：插件，比loader更强大

3、webpack的使用

webpack4 的安装与配置：
首先先npm init，初始化
目录结构：
在这里插入图片描述

``webpack4的安装还需要安装webpack-cli
npm install webpack@4 --save-dev
npm install webpack@4 webpack-cli --save-dev

package.json:

![在这里插入图片描述](https://img-blog.csdnimg.cn/20191208181032154.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ==,size_16,color_FFFFFF,t_70)

通过webpack.config.js 写入简单配置代码：

// webpack4的配置
module.exports = {
    // development为开发环境，production为生产环境
    mode: "development",
    entry:  __dirname + "/app/main.js", // 唯一入口文件
    output: {
        path: __dirname + "/common", // 打包后的文件存放的地方
        filename: "index.js" // 打包后输出文件的文件名
    }
}

加载css的配置：
npm install --save-dev style-loader css-loader

module: {
rules: [
{
test: /.css$/,
use: [
‘style-loader’,
‘css-loader’
]
}
]
}

加载图片：
npm install --save-dev file-loader

{
test: /.(png|svg|jpg|gif)$/,
use: [
‘file-loader’
]
}