webpack_的概念干货

webpack搭建01

模块打包器( 打包后的代码混淆压缩过 )

webpack官网文档

安装

  1. 环境准备:nodeJs升级到最新版本(原因:node高级性能高,webpack运行效率更高,避免产生奇奇怪怪的问题)
  2. webpack版本为最新的(4.x版本)
  • 搭建项目
//一、初始化项目
npm init -y

//二、局部安装方式  (推荐)
npm install webpack webpack-cli -D

//二、(不推荐)  版本固定
npm install webapck webpack-cli -g

启动

  • npx webpack
  • script 脚本命令 npm run build
//(在package.json中配置)
 "scripts": {
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server"
  },

配置

  • 默认配置 0配置
  • 自定义配置 webpack.config.js
  • webpack.dev.config.js webpack.pro.config.js

核心概念

  • 何为零配置:自带配置项 很弱 (一般都选择自定义)

  • 何为配置文件:默认配置文件 自定义配置文件

  • entry:打包入口【spa 、 map】

     entry: './src/index.js',//入口 (默认不写项目加载的是src下的 index.js)
    
  • output:打包输出出口

     output: {
            filename: 'build.[hash:6].js', //打包后的文件名(加个哈希控制长度)
            path: path.resolve(__dirname, 'build') //路径必须是一个绝对路径
        },
    
  • mode:模式 (“development” | “production” | “none”)

       mode: "production",//模式 "development" | "production" | "none"
    
  • loader模块转换器 模块处理器

    //执行顺序为:由下到上;右到左
     rules: [
                {
                    test: /\.css$/, use: [
     					'style-loader',
                        'css-loader',
                        'postcss-loader'
                    ]
          }]
    
  • plugin插件 webpack的功能扩展html-webpack-plugin

    //使用例子:
     plugins: [//数组 放着所有的webpack插件
            new HtmlWebpackPlugin({
                template: "./public/index.html",
                filename: 'index.html',
                hash: true
            }),
            // css单独抽离处理
            new MiniCssExtractPlugin({
                filename: 'main.css'
            })
        ],
    
  • chunk :代码片段(输出后的的代码片段)

  • module:模块

  • bundle :输出的资源文件 就叫bundle文件

  • bundle chunk module 三者之间的关系
    1、一个chunks可以对应1个或多个模块
    2、一个bundle对应一个chunks

©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页