webpack初体验

什么是webpack?

它是一个静态资源打包工具.****,自动化打包工具.

核心定义：webpack is a module bundler 翻译 : webpack 是一个模块打包工具

为了能让代码具备更高的复用性、可读性和维护性，我们可以将网页中的内容划分成不同的模块，使用 ES6 module

webpack 也可以识别 CommonJS 模块引入规范、CMD、 ADM 模块规范。

webpack 优点

1 . 不需要在 HTML 中引入很多的 JS 文件，提高文件加载速度。
2 .文件和文件之间的依赖关系会变得很明确，降低出错率，提高代码的可维护性。
3. .webpack 就是将 .jpg .png .sass .sass .js .sass .js .hbs 等文件压缩到一个文件内.减少源文件的体积.来加快网页运行效率.提高用户体验.

4 .它甚至可以将我们浏览器解析不了的ES6语法通过loader帮我们解析成浏览器所熟悉的ES5

5 .可以减少我们的request 请求.

创建项目

mkdir  firstWebpackText
npm init  // 初始化 包管理 

安装

由于 npm 安装速度慢,推荐大家百度淘宝镜像
在安装前确保 运行 webpack 5 的 Node.js 最低版本是 10.13.0 (LTS) !

	
npm install 	webpack-cli  webpack //下载webpack项目内依赖  or   
npm install 	webpack-cli  webpack  -g  //全局安装 可以使 webpack 在全局环境下可用：

验证 webpack 安装成功： webpack -v 出现版本号表示安装成功.

webpack 的简单配置

基础配置

在项目的根目录中新建 webpack.config.js 做配置：

// 引入node提供的 path 对象，来配置打包好的文件的路径
const path = require('path');

// webpack 配置文件
module.exports = {
  entry: './index.js', // 指定要打包的入口文件路径(根据入口文件和配置文件的相对目录自拟)
  output: { // 打包好的文件的配置
    filename: 'bubdle.js', // 打包好的文件的名称
    // __dirname 指 webpack.config.js 所在的目录
    // mydist 文件夹的绝对路径是和 webpack.config.js 同级父目录
    // 如果 path 不设置，那么打包之后的文件夹默认叫 dist，文件名默认叫 main.js
    path: path.resolve(__dirname, 'mydist') // 打包好的文件的路径
  }
};

配置文件

配置文件内可以设置我们的loader plugin 等配置项

创建 webpack.config.js 文件

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

当我们配置好文件就可以在命令行内执行webpack来生成bundle.js文件了

注意: 我们的webpack 只能默认打包压缩js与commonjs 需要打包其它的文件类型需要下载相应的loader 来配置.

loader的使用

加载 CSS

为了在 JavaScript 模块中 import 一个 CSS 文件，你需要安装 style-loader 和 css-loader，并在 module 配置 中添加这些 loader：

npm install style-loader css-loader 

webpack.config.js 种配置CSS loader

const path = require('path');

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

注意😗 必须将style-loder 放在 css-loader 之前不然样式不会正常显示

webpack处理html

安装：npm install html-webpack-plugin --save-dev
首先require一下：var HtmlWebpackPlugin = require(‘html-webpack-plugin’);
plugin里面添加：

plugins : [
    new HtmlWebpackPlugin({
        template : 'index.html',
        filename : 'view/index.html',
        inject : 'head',
        title : 'webpack is good',
        minify : {
            removeComments : true,// 删除注释
            collapseWhitespace : true,// 删除空格
        },
        chunks : ['a'], 
        hash : true,
    }),

    new htmlWebpackPlugin({// 一个模板生成多个页面,就可以继续创建该插件对象
        template : 'index.html',
        filename : 'view/a.html',
        inject : 'body',
        title : 'this is a.html',
        excludeChunks  : ['a'],
    }),
],


参数：
template：所引用的模板
filename：生成的html文件的名称与位置
inject：true|false|'body'|'head'，注入所有的资源到特定的 template 或 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。
title：生成html的title，使用方式：<title><%= htmlWebpackPlugin.options.title %></title>
minify：对当前生成的html文件进行压缩
chunks：对生成的html文件引用指定的chunk
excludeChunks : 排除指定的chunk，其他的都会被加载

总结:

webpack官网连接

	1-webpack 是一个非常不错好用的构建化工具
	2-为我们代码的压缩体积
	3-网页的运行效率提升了很大作用
	大家可以多去官网看看,官网写的非常详细,非常棒.