webpack开启--webpack理解

初识webpack：

webpack是一种模块打包器或者说js构建工具。能够将程序猿书写的源代码打包为浏览器可以高效稳定运行的，兼容性较好的代码（build/dist/over）。 （html css js）

构建工具发展历程：grunt、glup、webpack(现在的主流)。

什么是webpack：

1.一种模块打包器或者说js构建工具

2.在webpack中将所有的前端资源文件都（json、js、css、img、less...）作为模块处理。

3.根据模块的依赖关系进行分析，生成对应资源。

五个核心概念：

1.入口（entry）：提示webpack应该使用哪个模块，作为构建其内部依赖图的开始。

2.输出（output）：在哪里输出这些文件，以及如何命名这些文件。

3.Loader：解析那些非js文件（webpack本身只能处理js与json）

4.插件（plugins）：执行范围更广的任务，从打包到优化都可以实现。

5.模式（mode）：有生产模式production和开发模式development。

对loader理解：

本身是一个函数接收源文件作为参数，返回转换的结果。

loader一般以xxx-loader方式命名，xxx代表了这个loader要做的转换功能。

对plugins的理解：

plugins完成loader不能完成的功能。

配置文件：

webpack.config.js。

webpack能干什么：

webpack本身可以处理的是js文件（es6模块化文件）转为comminJs和json文件，而且它不能对es6转es5做相应的处理。不会处理es6除模块化之外的的语法。

压缩代码。

干不了什么：

不能编译打包css、img文件。

不能将js的es6基本语法转化为es5以下语法。

改善：使用webpack配置文件解决。

webpack配置文件：webpack.config.js

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "main.js",
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

1.该文件是webpack的配置文件，所有webpack的任务，用到的loader、plugins都要配置在这里。

2.该文件要符合CJS模块化规范。

开发依赖：帮助程序猿加工代码的库，都是开发依赖。

生产依赖：帮助程序猿实现效果的库。

配置webpack解析css为js：

下载包：

npm i css-loader style-loader -D

配置： 

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader",   //创建style标签，将样式资源插入，添加到header中生效
                "css-loader"    //将css文件变成commonJs模块加载到js中，里面内容是样式字符串
             ],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

 注意这里的版本问题。两个loader的版本需一致

配置webpack解析less为js：

下载包 ：

npm i less-loader -D

 配置：

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

配置webpack生成html文件：

下载包：

npm install --save-dev html-webpack-plugin

配置：

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
//配置css相关
const cssBasicLoader = ["style-loader", "css-loader"]
//配置html-webpack-plugin 生成html
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/js/app.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "js/main.js",
  },
  // 加载器 
  module: {
    rules: [
      //配置解析css
      {
        test: /\.css$/i,   //正则表达式匹配以.css结尾的文件
        use: [...cssBasicLoader],
      },
      //配置解析less
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          ...cssBasicLoader,
          'less-loader',
        ],
      },
    ]
  },
  // webpack中专门用于配置插件，插件必须经过实例化这一环节
  plugins: [
    //实例化  HtmlWebpackPlugin
    new HtmlWebpackPlugin({
      template:"./src/index.html"
    }) 
  ],
  // 模式
  mode: "development", // 开发模式
};