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

官方的指南：https://www.webpackjs.com/guides/

这个网站的介绍比较容易懂：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文件）