webpack打包工具的使用总结（总结最通用的）

迷南。 2021-09-17 15:26 210阅读 0赞

官方的指南：[https://www.webpackjs.com/guides/][https_www.webpackjs.com_guides]

这个网站的介绍比较容易懂：[https://malun666.github.io/aicoder\_vip\_doc/\#pages/vip\_2webpack][https_malun666.github.io_aicoder_vip_doc_pages_vip_2webpack]

快速搭建一个demo（也支持ES6转ES5打包）

### **第一步：创建项目结构** ###

首先我们创建一个目录，初始化 npm，然后 在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：

mkdir webpack-demo && cd webpack-demo
    npm init -y
    npm install webpack webpack-cli --save-dev

### **项目结构（这里的结构，决定了webpack.config.js文件的路径设置，不是死的）** ###

webpack-demo
    + |- package.json
    + |- /dist
    + index.html
    + |- /src
    +   |- /js/index.jsClick to copy

### **第二步：安装 loadash 依赖！** ###

npm install --save lodash

### **第三步：创建index.js文件** ###

//这里随意，主要用来测试打包成功之后的结果！
    import $ from 'jquery';
    
    console.log($);
    
    $("body").css("background","red");
    console.log("打包成功");

### **第四步：最重要的一个文件，webpack.config.js 内容如下：** ###

const path = require('path');
    
    module.exports = {
      //这部分是处理js文件打包用的！
      mode: 'development',
      //根据自己的路径设置
      entry: './src/js/index.js',
      output: {
        filename: 'main.js',
        //输出的目录（相对路径转绝对路径函数）
        path: path.resolve(__dirname, './dist')
      },
    
      //这里是打包js+css文件，如果没有css可以不设置！设置一个module,加载css文件！
      module: {
        rules: [
          {
            //这里的意思是文件必须.css结尾！
            test: /\.css$/,
            //这里的执行顺序是从右向左，所以顺序不可改变！
            use: ['style-loader', 'css-loader']
          }
        ]
      }
    };

*  ### **最终执行构建任务** ###

直接执行构建任务（执行本地命令必须用npx来执行，否则无法执行！！！）：

### `npx webpack  （最终把import "jqurey"的代码和index.js代码打包了--关联代码打包）` ###

打开： index.html 可以查看到页面的结果（引入打包后的js文件）

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

[https_www.webpackjs.com_guides]: https://www.webpackjs.com/guides/
[https_malun666.github.io_aicoder_vip_doc_pages_vip_2webpack]: https://malun666.github.io/aicoder_vip_doc/#pages/vip_2webpack