webpack基础使用

概念

现代javascript 应用程序的 静态模块打包工具

合并代码,还可以压缩和翻译代码

安装

1. 创建webpack文件夹

2. 初始化包环境

   yarn init
   

3. 安装依赖包

    yarn add webpack webpack-cli -D
   

4. 在package.json中，配置scripts(自定义命令)

   scripts：{
          "build": "webpack"
   }
   

使用

1. 新建src/add/add.js - 定义求和函数导出

   export const addFn = (a, b) => a + b
   

2. 新建src/index.js导入使用

   // webpack打包的入口
   import { addFn } from './add/add'
   console.log(addFn(5, 2));
   

3. 运行打包命令

   yarn build
   

配置

新建webpack.config.js文件夹（默认配置文件名）

1. 修改默认入口和出口

    const path = require("path")
    module.exports = {    
        entry: "./src/main.js", // enter: 默认入口
        output: {        
            path: path.join(__dirname, "dist"), // 出口"文件夹"名 
            filename: "bundle.js"               // 出口"文件"名    
        }
    }
   

常用插件

1. 自动生成html文件

   html-webpack-plugin插件文档

   下载插件

   yarn add html-webpack-plugin@5.3.1  -D
   

   webpack.config.js配置

   // 引入自动生成 html 的插件
   const HtmlWebpackPlugin = require('html-webpack-plugin') 
   
   module.exports = {
       // ...省略其他代码
       plugins: [
           new HtmlWebpackPlugin({
               // 以此为基准生成打包后html文件
               template: './public/index.html' 
           })
       ]
   }
   
   
   

2. 处理css文件

   安装依赖

   yarn add css-loader  style-loader -D
   

   配置webpack.config.js配置

   module.exports = {
       // ...其他代码
       module: { // 如何处理项目中不同模块文件
           rules: [ // 规则
             {
               test: /\.css$/, // 匹配所有的css文件
               // use数组里从右向左运行
               // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
               // 再用 style-loader 将样式, 把css插入到dom中
               use: [ "style-loader", "css-loader"]
             }
           ]
       }
   }
   
   
   

   其他插件自己见官方文档

   官方文档

开发服务器

1. 下载包

   yarn add webpack-dev-server@3.11.2 -D
   

2. 配置自定义命令serve

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

3. 运行命令-启动webpack开发服务器

   yarn serve
   #或者 npm run serve
   

4. 启动web服务器和端口，在浏览器访问查看

5. 服务器端口号配置

   配置文档

   module.exports = {
       // ...其他配置
       devServer: {
         port: 3000, // 端口号
         open: true // 启动后自动打开浏览器
       }
   }
   

   重启服务器观察效果

   结束！