Webpack 打包 - 1.webpack 基本打包(JS、JSON)。

1.文件结构

 

 2.初始化，生成 package.json 文件

$ npm init

 2.1安装 webpack 和 webpack-cli. (这里使用的是 webpack5 以下的版本)

$ npm i webpack@4.41.6  webpack-cli@3.3.11  -g   //(全局)
$ npm i webpack@4.41.6  webpack-cli@3.3.11  -D   //(开发)

3. 新建 build 文件夹，用于存放打包生成后的 js 文件。

3.1 新建 src 文件夹，用于存放代码文件。

3.1.1 src 文件夹下，新建 index.js 文件，用于项目的入口文件。

3.1.2 src 文件夹下，新建 data.json 文件 和 index.css 文件。

 

index.js (文件中引入data.json文件,这次用的打包方式处理不了 css 文件，暂时注释掉)

/* 
    index.js: webpack 入口起点文件

    1.运行指令:
        开发环境: 
            webpack ./src/index.js -o ./build/built.js --mode=development
            webpack 会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/build.js
            整体打包环境，是开发环境

        生产环境: 
            webpack ./src/index.js -o ./build/built.js --mode=production
            webpack 会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js
            整体打包环境，是生产环境

    2.结论:
        1.webpack 只能处理 js、json 类型文件，不能处理 css/img 等其他资源。
        2.生产环境和开发环境将 ES6 模块化编译成浏览器能识别的模块化。
        3.生产环境比开发环境多一个js压缩代码。

*/

import data from './data.json'

console.log('data:',data)

// 不能处理 css/img 等其他资源。
// import './index.css'

function add(x,y){
    return x+y
}

console.log(add(1,2));

 

data.json

{
    "name":"zs",
    "age":18
}

 

index.css

html,body{
    height: 100%;
    background-color: pink;
}

 

4.执行打包命令：

//开发环境: 
$ webpack ./src/index.js -o ./build/built.js --mode=development 
//webpack 会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js


//生产环境: 
$ webpack ./src/index.js -o ./build/built.js --mode=production 
//webpack 会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/built.js

 

4.1此时，build 问价夹下生成 built.js 文件 

 

 

 

 5.预览

5.1 build文件夹下新建 index.html, 并引入 built.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./built.js"></script>
</head>
<body>
</body>
</html>

浏览器中打开 index.html

 

 

end~

 

posted @ 2022-08-16 11:30  Evengod  阅读(811)  评论(0)  编辑  收藏  举报