带你认识Webpack的超详细使用及其基础配置

一、模块化

Nodejs（require、module.exports）

ES6 (import、export)

二、webpack

是一个打包工具。

1.在项目中安装webpack

• npm init -y

  初始化工程化。这个命令完成之后，会在项目中创建一个package.json文件（包管理文件）

• 下载webpack

  npm install webpack webpack-cli --dev (development -- 开发阶段使用的包)
  npm i webpack webpack-cli -D

• package.json 文件中scripts

  "scripts": {
     "build": "webpack"
  }

2.完成更加复杂的打包工作（css文件）

• 在项目中添加 webpack.config.js 文件

  module.exports = {
    entry: "./src/index.js",
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "bundle.js"
    }
  }

• 对css文件处理

• 配置webpack.config.js

  module.exports = {
    entry: "./src/index.js",
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "bundle.js"
    }
  }

  3. 完成更加复杂的打包工作（scss/less文件）

• 安装less、less-loader

• 配置webpack.config.js

  module.exports = {
    entry: "./src/index.js",
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "bundle.js"
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"]
        },
        {
          test: /\.less$/,
          use: ["style-loader", "css-loader", "less-loader"]
        }
      ]
    }
  }

4.完成对图片的打包

• 安装ulr- loader和file-loader

• 配置webpack.config.js

  module.exports = {
    entry: "./src/index.js",
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "bundle.js"
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"]
        },
        {
          test: /\.less$/,
          use: ["style-loader", "css-loader", "less-loader"]
        },
        {
          test: /\.(jpg|png|gif|jpeg|webp|svg|woff)$/,
          use: "url-loader" // url-loader 会自动调用file-loader
        }
      ]
    }
  }

5.将index.html文件拷贝到dist中

• 插件 （html-webpack-plugin）

• 配置webpack.config.js

  const htmlWebapckPlugin = require("html-webpack-plugin")
  module.exports = {
    entry: "./src/index.js",
    output: {
      path: path.resolve(__dirname, "dist"),
      filename: "bundle.js"
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"]
        },
        {
          test: /\.less$/,
          use: ["style-loader", "css-loader", "less-loader"]
        },
        {
          test: /\.(jpg|png|gif|jpeg|webp|svg|woff)$/,
          use: "url-loader" // url-loader 会自动调用file-loader
        }
      ]
    },
    plugins: [
      new htmlWebpackPlugin({
        template: './index.html'
      })
    ]
  }

6. 服务器工具 (将bundle.js 和index.html打包到了内存中)

• 安装

• 配置package.json

  "scripts": {
    "dev": "webpack-dev-server",
    "serve": "webpack-dev-server"
  }

三、webpack在Vue项目中使用