webpack从0-1打包运行项目

蔚落 2022-11-10 00:46 175阅读 0赞

官方文档：[Concepts | webpack][Concepts _ webpack]

一、webpack的基本使用

*  建立初始文件

1、建立一个文件夹demo，用来放我们的项目

2、将新建的文件夹拖入到vscode

3、文件夹下新建目录文件夹dist，用来放我们打包之后的资源

4、文件夹下新建目录文件夹src/main.js，src源代码的位置

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_20_color_FFFFFF_t_70_g_se_x_16][]

5、打开命令行

yarn init -y

6、安装依赖包(-D将依赖记录成开发依赖，只是开发中需要用的依赖，实际上线不需要的)

yarn add webpack webpack-cli -D

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_20_color_FFFFFF_t_70_g_se_x_16 1][] 7、到package.json文件中，配置scripts

"scripts": {
        "build":"webpack --config webpack.config.js"
      }

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

8、新建webpack.config.js文件

const path = require("path");
    
    //配置webpack的配置文件，需要将配置的对象导出，给webpack使用
    module.exports = {
      // 1. 入口 entry，从哪个文件开始打包
      entry: "./src/main.js",
      // 2. 出口 output，打包到哪里去
      output: {
        //打包输出的目录（输出的目录必须是一个绝对路径）
        path: path.join(__dirname, "dist"),
        //打包后生成的文件名
        filename: "bundle.js",
      },
      // 3. 模式 mode development未压缩的，production压缩的。平常上线的是用production，但是因为我们现在想要看打包之后的内容，所以暂时先用development
      mode: "development",
    };

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_15_color_FFFFFF_t_70_g_se_x_16][]

9、执行配置的scripts脚本

yarn build

打包成功![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

可以看到我们的dist文件夹下，新增了一个bundle.js文件，同时文件内也可以看到我们在main.js中的内容 ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

二、自动生成html-webpack-plugin插件

1、新建一个文件夹：public，放一些不需额外处理，直接原封不动放入打包中的资源，例如html，网站logo等

此处，我暂时先新建一个index.html

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

2、下载(-D将依赖记录成开发依赖，只是开发中需要用的依赖，实际上线不需要的)

yarn add html-webpack-plugin -D

3、在webpack.config.js文件中，引入这个模块：

//引入自动生成html的插件
    const HtmlWebpackPlugin = require('html-webpack-plugin')

4、配置

plugins:[
        new HtmlWebpackPlugin({ template:'./public/index.html' })
    ]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

配置好之后，执行yarn build可以查看到dist文件夹下面多了一个index.html，并且这个Html内引用了我们的打包js文件

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_20_color_FFFFFF_t_70_g_se_x_16 7][]

三、webpack中处理css文件

参考官方文档中：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_20_color_FFFFFF_t_70_g_se_x_16 8][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_20_color_FFFFFF_t_70_g_se_x_16 9][]

1、在src下新建文件夹css，然后新建文件base.css

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_20_color_FFFFFF_t_70_g_se_x_16 10][]

2、安装依赖

yarn add style-loader css-loader -D

3、 修改webpack.config.js文件

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_20_color_FFFFFF_t_70_g_se_x_16 11][]

4、在main.js中引入css文件

//导入css
    require("./css/base.css");
    console.log("======main.js打包测试");

5、 配置好之后，执行yarn build，可以查看到dist文件夹下bundle.js内引用了我们的css文件。并且dist文件夹下index.html浏览审查元素，可以看到css生效。

对我们的react项目进行webpack打包

*  通过npx create-react-app my-app生成项目my-app，并通过cd定位到该项目下

*  cd到项目目录下,执行如下代码,这个是安装到系统下得，供往后可以以webpack命令打包

cd my-app

npm i webpack webpack-cli -g

报错：-bash: cnpm: command not found

安装cnpm

npm install cnpm -g --registry=https://registry.npm.taobao.org

报错

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

原因: 执行命令行命令时没有获得管理员权限  
解决方案：在命令行前面添加sudo获取管理员权限，输入管理员密码就行  
原因: 执行命令行命令时没有获得管理员权限  
例如原来的是:  npm install cnpm -g --registry=https://registry.npm.taobao.org  
应该该为：sudo npm install cnpm -g --registry=https://registry.npm.taobao.org   再输入密码就行

*  cd到项目目录下,直接安装即可,这个是安装到系统下得，供往后可以以webpack命令打包

cnpm i webpack webpack-cli -g
    或者
    sudo cnpm i webpack webpack-cli -g

*  这个是安装到项目依赖里面去,也就是在node\_mudule里面

npm i --save-dev webpack webpack-dev-server webpack-cli

*  安装必要的依赖

npm i --save-dev babel-core babel-loader @babel/preset-env @babel/preset-react html-webpack-plugin

*  package.json

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1][]

检查package里面的devDependencies

调整package里面的scripts为如下代码

"scripts": {
        "start": "webpack-dev-server --mode development --open --hot",
        "buile": "webpack --mode production"
      },

*  webpack.config.js

根目录新建一个webpack.config.js文件，实例代码如下：

*  .babelrc

根目录新增一个.babelrc文件,输入以下内容

{
        "presets": [
            "@babel/preset-env",
            "@babel/preset-react"
        ]
    }

*  src目录

新增index.html文件

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title>React App</title>
      </head>
      <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <p>welcome to react-world</p>
        <div id="root"></div>
      </body>
    </html>

*  npm start出现报错Error: Cannot find module 'webpack-cli/bin/config-yargs'

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2][]

百度了一些解决办法  
\* 解决方法一：  
安装webpack-cli即可：  
cnpm i webpack-cli -D  
(测试无效)

\* 解决方法二：  
卸载当前版本的webpack和webpack-dev-server：

cnpm uninstall webpack -g
    cnpm uninstall webpack-dev-server -g

指定老版本安装：

cnpm i webpack@3.8.0 -D
    cnpm i webpack-dev-server@2.9.7 -D

[Concepts _ webpack]: https://webpack.js.org/concepts/
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20221023/8e290104234241b9be162262325b0ca4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20221023/3811ee0a43d04397b30da2407afca68f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20221023/9c13de7686e540eba9a6ec80e474c030.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20221023/891a99362a73480aa9f5ccf9d1f8068a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20221023/a619177297494b8da217511a373a6cf6.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20221023/763d3e63edd74ad4b50bdc5363cb3556.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20221023/1547eeb77b5240ce93b313d8bbda20a5.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20221023/d5ae37fdbac14f5ea786f444a87f1482.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_20_color_FFFFFF_t_70_g_se_x_16 7]: /images/20221023/7293cc60a8dc4716ba8a081d1ada5b76.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_20_color_FFFFFF_t_70_g_se_x_16 8]: /images/20221023/35e73ada019c4dd297594401efa1434c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_20_color_FFFFFF_t_70_g_se_x_16 9]: /images/20221023/c3f472e631974a71a1cace714628f69b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_20_color_FFFFFF_t_70_g_se_x_16 10]: /images/20221023/3db8a1255a6841ae9c333aa383808a3e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54Ot54ix5YmN56uv55qE5bCP5ZCb5ZCM5a2m_size_20_color_FFFFFF_t_70_g_se_x_16 11]: /images/20221023/06d6757b41ee40e4bf5447bfb159c722.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20221023/d9a3e11404ce45c6928ac9a11a9b5f21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1]: /images/20221023/a63e57e77e0348d58b6b8b86d8d04367.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2]: /images/20221023/e21f9538597e49fa9d1bdb3e8048e0eb.png