构建工具学习第一天 (webpack)

• 通过webpack构建工具，可以把EMS规范编写转换成旧的JS语法，兼容各大浏览器
• 将多个模块打包成一个文件。这样一来即解决了兼容性问题，又解决了模块过多的问题。
• webpack是打包的，没有项目也可以运行

webpack使用步骤：

1. 初始化项目npm init 生成 package.json文件

npm init         #一步一步回车
npm init -y      #省去一步一步回车  直接安装完成，生成package.json

2. 安装依赖webpack、webpack-cli

npm i -D webpack webpack-cli   #开发环境安装webpack和webpack-cli

3. 在项目中创建src目录，然后编写代码index.js(文件名一定要是这个)，将目标代码写入此文件或与此文件形成依赖关系
4. 执行yarn webpack来对代码进行打包（打包后观察dist目录）

npx webpack   # 打包

也可以在package.json中配置打包

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

这里就可以运行

 npm run build

webpack配置文件

新建 webpack.config.js，以下是默认配置，没有配置也可以打包js

const path = require("path")
module.exports = {
#设置打包的模式，production生产模式，development开发模式
    mode: "production", 
    
# 指定打包时的主文件，约定优于配置  ./src/index.js，entry可以是数组也可以是对象
    entry: "./src/index.js",
    
# 配置打包后的地址
     output:{
        path:path.resolve(__dirname,"dist"),  # 打包后的目录，这里是绝对路径
        filename:"main.js",   #打包后文件名,如果entry中是对象多文件的话，这里配置 "[name].js"
        clean:true     #自动清理打包目录
    },

}

loader

webpack默认只能处理js，如果要处理css获其它类型文件，就要引入loader

安装loader

npm i css-loader -D

配置loader

const path = require("path")
module.exports = {
    mode: "production", 
    entry: "./src/index.js",
    output: {  }, 
    module: {   
        rules: [
            {
                test: /\.css$/i,     #指定.css结尾的文件要被webpack处理打包
                use: ["style-loader", "css-loader"]   #指定用什么处理，这里有顺序要求，不能弄反了
            },
            {
               test:/\.(jpg|png|git)$/i,    # 指定图片打包
               type:"asset/resource"   //图片是直接资源类型的数据，可以通过指定type来处理
            }
        ]
    }
}

babel

babel就是这样一个工具，可以将新的js语法转换为旧的js，以提高代码的兼容性。

npm install -D babel-loader @babel/core @babel/preset-env

2. 在webpack.config.js中配置

module: {
  rules: [
    {
      test: /\.m?js$/,   #要处理哪些文件以js或者以，mjs结尾的文件
      exclude: /(node_modules|bower_components)/,  # 排除
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

3. 在package.json中设置兼容列表

"browserslist": [
        "defaults"
 ]

plugin

插件用来为webpack来扩展功能
希望 有个插件可以在打包代码后，自动在打包目录生成html页面html-webpack-plugin

npm i html-webpack-plugin -D

2. 在webpack.config.js中配置

plugins: [
        new HTMLPlugin()
    ]

构建完，再次打包代码会在dist中自动生成一个index.html

plugins: [
        new HTMLPlugin({
            // title: "Hello Webpack",  # 浏览器上面的title会变成构建的
            template: "./src/index.html"  # 建构后会自动把src/index.html中的html模板构建到dist的index.html中
        })
    ]

开发服务器—热加载

webpack每次代码构建完都要执行 npm run build 才能看到浏览器效果，每更新一点都要执行一遍太麻烦

1. 安装webpack一个开发服务器

npm i -D webpack-dev-server

2. 会把代码部署到服务器中

npx webpack-dev-server --open

以后代码修改，就会自动刷新和部署代码
同样也可以才package.json中的script配置启动命令

  "scripts": {
    "build": "webpack",   #手动打包
    "watch":"webpack --watch",     #监视模式
    "dev":"webpack serve --open"   #启动服务器的命令，热加载
  },

这时候代码不会自动打包，开发完代码还要手动打包一下 npm run build

代码在浏览器中调试

希望在浏览器中运行的是开发的代码，不是打包后的代码
在webpack.config.js中配置源码的映射
devtool:“inline-source-map”

const path = require("path")
module.exports = {
    mode: "production",
    entry:"./src/index.js",
    output:{
        path:path.resolve(__dirname,"hello"),
        filename:"main.js",
        clean:true
    },
    module: {   
        rules: [
            {
                test: /\.css$/i,     
                use: ["style-loader", "css-loader"]   
            },
            {
                test:/\.(jpg|png|git)$/i,
                type:"asset/resource"   //图片是直接资源类型的数据，可以通过指定type来处理
            },
             {
			      test: /\.m?js$/,
			      exclude: /(node_modules|bower_components)/,
			      use: {
			        loader: 'babel-loader',
			        options: {
			            presets: ['@babel/preset-env']
			        }
			    }
		     },
        ]
    },
    plugins: [
        new HTMLPlugin({
            // title: "Hello Webpack",
            template: "./src/index.html"
        })
    ]
    devtool:"inline-source-map" 

}