webpack实现前端代码打包(上)

时间:2021-1-8 作者:admin

Webpack

什么是webpack?

本质上,webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle

安装

webpack 是一个使用 Node.js 实现的一个模块化代码打包工具。所以,我们需要先安装 webpack,安装之前需要搭建好 Node.js 环境

 npm install -D webpack webpack-cli

注:不推荐全局安装,并且某些插件与高版本webpack不兼容,可以手改package.json文件中的版本后重新安装

webpack-cli : 提供 webpack 命令、工具,类似 create-react-app

webpack : webpack 代码,类似 react

使用

//启动webpack打包
./node_moudle/.bin/webpack

//查看版本
./node_moudle/.bin/webpack -v

上述方式比较繁琐,可以在package.json文件中的script下新增以下内容:

// package.json
{
    ...,
    "scripts": {
        "start": "webpack"    // scripts 中可以自动在 ./node_modules/.bin/ 目录下查找,因此不需要补全路径
    }
}

package.json中写好之后可以在终端中直接使用npm run start启动webpack。

此外还可以在终端中使用npx指令:npx webpack。该指令会自动在./node_moudle/.bin/目录下查找资源。

webpack配置

entry

入口起点(entry point)指示webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。

每个依赖项随即被处理,最后输出到称之为bundles的文件中,我们将在下一章节详细讨论这个过程。

可以通过在webpack配置中配置entry属性,来指定一个入口起点(或多个入口起点)。默认值为 ./src

//webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js'
};
//这样的话,webpack就会以该file.js文件作为入口开始打包。

output

output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段,来配置这些处理过程:

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};
//在根目录下创建dist命名的文件夹,并在该文件夹下生成打包后的文件my-first-webpack.bundle.js

loader

loader用于对模块的源代码进行转换。loader可以在使用import导入或者加载模块之前,先对模块进行预处理。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件。

loader具有如下特性:

  • 支持链式操作
  • 支持同步、异步
  • 可接收查询参数,用于对loader传递配置
  • 可以使用options对象来对loader进行配置

例如,webpack其实是可以加载各类文件如css、txt文件等,但是默认是以js文件类型导入。使用loader就可以告诉webpack正确的导入css等类型的文件,或者将JS文件转换为TS文件。首先需要安装好对应的loader组件:

npm install --save-dev css-loader
npm install --save-dev ts-loader

安装好之后,在webpack.config.js内配置好loader的相关规则配置。

//webpack.config.js  

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

实例

通过entry、output、loader的配置使用,已经可以实现webpack打包的基本功能。

//资源组织结构如下
-- /dist //项目打包后存放目录
-- /node_modules //第三方模块
-- /src //工作目录
---- css/
---- images/
---- js/
---- index.js
-- /template
---- index.html
-- webpack.config.js
-- package.json

入口文件index.js文件内容

import fn1 from './js/fn1.js'
import fn2 from './js/fn2.js'
import img from './images/logo.png'
let bottunElement = docunment.qs('#btn1')

console.log('fn1',fn1);

let image = new Image();
image.src = img;
document.body.appendChild(image);

bottunElement.onclick = function(){
    fn2();
}

fn1.js文件内容

export default 100 ;

fn2.js文件内容

console.log('resolved');

模板文件index.html文件内容:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><document></title>
</head>
<body>
    <h1>webpack</h1>
    <button id="btn1">
        click
    </button>
</body>
</html>

webpack.config.js配置内容

const path = require('path');

module.exports = {
    entry: {
        'index': './src/index.js'
    },

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js'
    },

    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif)$/,
                use: {
                    loader: "url-loader",
                    options: {
                        // placeholder 占位符 [name] 源资源模块的名称
                        // [ext] 源资源模块的后缀
                        name: "[name]_[hash].[ext]",
                        //打包后的存放位置
                        outputPath: "./images",
                        // 打包后文件的 url
                        publicPath: '../dist/images',
                        // 小于 100 字节转成 base64 格式
                        limit: 100
                    }
                },
            },

            {
                test: /\.css$/,
                use: [
                    // "style-loader",
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: "css-loader",
                        options: {
                            // 启用/禁用 url() 处理
                            url: true,
                            // 启用/禁用 @import 处理
                            import: true,
                            // 启用/禁用 Sourcemap
                            sourceMap: false
                        }
                    }]
            }
        ]
    }
}
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。