Webpack快速入门

叁歲伎倆 2022-04-01 12:25 257阅读 0赞

### 1.什么是webpack？ ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0Y2F0c19jbg_size_16_color_FFFFFF_t_70][]

由上图看出，webpack可以将众多的静态资源(js、css、less)转化为一个静态文件，减少了页面请求，下面的篇幅我将为大家简单介绍一下webpack的使用

### 2.安装webpack ###

执行全局安装webpack

npm install webpack -g

全局安装webpack-cli(webpack客户端)

npm install webpack-cli -g

安装后查看安装的版本号

webpack -v

### 3.使用webpack对js进行打包 ###

参考webpack中文文档：[https://www.webpackjs.com][https_www.webpackjs.com]

1.在src同级目录下创建**webpack.config.js**

const path = require('path');
    
    module.exports = {
      entry: './src/index.js',
      output: {
          path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
      }
    };

2.终端进入配置文件(**webpack.config.js**)所在目录下，执行命令

webpack

3.在该目录下创建**index.html**

<!doctype html>
    <html>
      <head>
      </head>
      <body>
        <script src="dist/bundle.js"></script>
      </body>
    </html>

4.查看index.html  内容正常输出 ，打包完成

### 4.使用loader插件对css打包 ###

详情参见：[https://www.webpackjs.com/concepts/loaders/][https_www.webpackjs.com_concepts_loaders]

(1)安装style-loader和css-loader

webpack只能对js文件进行打包，如果需处理其他类型的文件就需要使用loader进行转换了。

Loader可以理解为模块和资源的转换器，它本身是一个函数，接收源文件作为参数，返回转换的结果。这样，我们就可以通过require来加载任何类型的模块或文件。css-loader是将css装载到javascript，style-loader是让javascript认识css

cnpm install style-loader css-loader --save-dev

(2)修改webpack.config.js

module.exports = {
      module: {
        rules: [
          { test: /\.css$/, use: ['css-loader','style-loader']},
        ]
      }
    };

(3)在src文件夹中创建css1.css

body{
      background:red
    }

在main.js中导入

required('./css1.css')

(4)重新打包 执行：webpack

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0Y2F0c19jbg_size_16_color_FFFFFF_t_70]: /images/20220401/7233329f52184cd491701a00646cbe38.png
[https_www.webpackjs.com]: https://www.webpackjs.com
[https_www.webpackjs.com_concepts_loaders]: https://www.webpackjs.com/concepts/loaders/