一文了解webpack配置

环境安装

• 初始化项目

npm init

• 安装webpack库

npm i webpack -D

• 安装webpack工具(命令行工具可以通过命令行命令驱动项目运行)

npm i webpack-cli -D

创建项目基本格式

webpack基本配置(entry,output之间的关系)

• 创建webpack.config.js 文件

// webpack相关得配置文件是通过nodejs环境启动的
//所以它默认的语法是commonjs语法,不可以使用import 和export

const path = require('path');
module.exports={
    mode:'development',
    //需要加工的文件在哪 
    entry:{
        index:'./src/index.js'
    },
    // 把加工的文件放哪
    output:{
        // filename:'bundle.js', //输出文件名称
        // path:path.join(__dirname,'dist')  // __dirname 得到文件夹全路径
        filename:'[name]bundle.js', //输出文件名称
        path:path.resolve(__dirname,'dist'),
    }
}

// entry 和 output 可以对着webpack官网这张图理解   entry 是图左边的文件  output 是右侧的文件    entry里的文件通过中间的盒子 打包成右边 output的文件

打包测试

npx webpack

会生成dist文件

plugins解读

• 安装htmlwebpackplugin插件

// webpack相关得配置文件是通过nodejs环境启动的
//所以它默认的语法是commonjs语法,不可以使用import 和export

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
    // mode:'development',
    //需要加工的文件在哪 
    entry:{
        index:'./src/index.js'
    },
    // 把加工后的文件输出位置
    output:{
        // filename:'bundle.js', //输出文件名称
        // path:path.join(__dirname,'dist')  // __dirname 得到文件夹全路径
        filename:'[name]bundle.js', //输出文件名称
        path:path.resolve(__dirname,'dist'),
    },
    //plugins可以理解把output输出的文件与那个文件相关联
    plugins:[
       new HtmlWebpackPlugin({
           template:path.resolve(__dirname,'public/index.html'),//找到要生成模板在哪
           filename:'index.html', //生成的文件名
           chunks:['index']  //与entry下的index文件关联
       })
    ]

}

配置开发 环境

• 安装npm i webpack-merge -D (合并代码可以这样理解,)
  webpack.dev.js 配置

const {merge} = require("webpack-merge");
const config = require('./webpack.config.js')
const path = require('path')
// merge插件会把config里面的代码自动合并
module.exports = merge(config,{
    mode:"development", //开发环境
    devServer:{
        //配置本地的静态文件夹,可以通过http地址直接访问展示
        static:[
            path.resolve(__dirname,'dist'),
            path.resolve(__dirname,'public')
        ],
        host:'localhost',   
        port:'8080',//配置端口
        open:true,//自动打开浏览器
    }
})

• 添加开发环境启动命令(这样就能使用npm run serve 启动了)

    "test": "webpack --config webpack.config.js --color --progress",
    "serve": "webpack serve --config webpack.dev.js --color --progress --hot"    //hot 热更新 代码修改后页面自动渲染

配置开发环境(prod.js)

• 安装 clean-webpack-plugin 插件

 npm -i clean-webpack-plugin

• prod.js 代码

const {merge} = require('webpack-merge');
const config = require('./webpack.config.js')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = merge(config,{
    mode:'production',
    output:{
        filename:'[name]-[hash].js' //这里的name 默认取的是config.js里 entry里的key   生产环境的filename替换config.js里的filenName
    },
    plugins:[
        new CleanWebpackPlugin()
    ]
}) 

• 打包命令配置(npm run build)

    "build":"webpack --config webpack.prod.js --color --progress"

babel插件

Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：

• 理解:
  async await是es7提出 es8才实现的 为什么在代码里面大量的使用都不用去考虑低版本浏览器是否适用?
  真正发布到生成环境的项目里面的代码其实已经不是async await了 babel插件会使用更低级的语法去适配