webpack

Webpack是一个打包模块化JavaScript的工具，它会从入口模块出发，识别出源码中的模块化导入语句，递归地找出入口文件的所有依赖，将入口和其所有的依赖打包到一个单独的文件中，是工程化、自动化思想在前端开发中的体现。

webpack官网 https://webpack.js.org

1.安装

npm install webpack webpack-cli --dev

不建议全局安装，因为全局安装webpack，这会将你项目中的webpack锁定到指定版本，造成不同的项目中因为webpack依赖不同版本而导致冲突，构建失败。

2.配置

webpack默认配置，默认配置文件

webpack默认支持JS模块和JSON模块
支持Commonjs Es moudule AMD等模块类型
webpack4支持零配置使用,但是很弱，稍微复杂些的场景都需要额外扩展

3.webpack配置核心概念

3.1 entry

//单页面入口SPA，本质是个字符串
entry:{main: './src/index.js'}
==相当于简写===
entry:"./src/index.js"
//多页面入口 entry是个对象
entry:{index:"./src/index.js",login:"./src/login.js"}

3.2 output

output: {
filename: "bundle.js",//输出文件的名称
path: path.resolve(__dirname, "dist")//输出文件到磁盘的目录，必须是绝对路径
},
//多入口的处理
output: {filename: "[name][chunkhash:8].js",//利用占位符，文件名称不要重复
path: path.resolve(__dirname, "dist")//输出文件到磁盘的目录，必须是绝对路径
}

3.3-mode

Mode用来指定当前的构建环境，production 、development，none设置mode可以自动触发webpack内置的函数，达到优化的效果

开发阶段的开启会有利利于热更更新的处理理，识别哪个模块变化
生产阶段的开启会有帮助模块压缩，处理副作用等一些功能

注意：一定要放在output前

3.4-loader

webpack是模块打包工具，而模块不仅是js，还可以是css，图片或者其他格式，但是webpack默认只知道如何处理js和JSON模块，那么其他格式的模块处理和处理方式就需要loader了

3.5-moudle

模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。当webpack处理到不认识的模块时，需要在webpack中的module处进行配置，当检测到是什么格式的模块，使用什么loader来处理。

3.6 plugin

plugin 可以在webpack运行到某个阶段的时候，帮你做一些事情，类似于生命周期的概念。扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。作用于整个构建过程，作用于webpack打包整个过程，webpack的打包过程是有（生命周期概念）钩子。

htmlwebpackplugin会在打包结束后，自动生成一个html文件，并把打包生成的js模块引入到该html中。

3.7sourceMap

源代码与打包后的代码的映射关系，通过sourceMap定位到源代码。在dev模式中，默认开启，关闭的话可以在配置⽂文件里

devtool:"none"

devtool:"cheap-module-eval-source-map",// 开发环境配置

//线上不推荐开启

devtool:"cheap-module-source-map", // 线上生成配置

module.exports = {
    devtool: "cheap-inline-source-map",
    entry: './src/index.js', //入口  
    mode: "development",  
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/index.js',
    },
}

3.7 devServer

每次改完代码都需要重新打包一次，打开浏览器器，刷新一次，很麻烦,我们可以安装使用webpackdevserver来改善这块的体验

安装： npm install webpack-dev-server -D

修改下package.json： "scripts": { "server": "webpack-dev-server" },

在webpack.config.js配置：devServer: { contentBase: "./dist", open: true, port: 8081 },

启动：npm run server

const path = require('path');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    devtool: "source-map",
    entry: './src/index.js', //入口  
    mode: "development",  
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/index.js',
    },
 
    module:{
        rules:[
         {
            test: /\.css$/,
            use: ["style-loader", "css-loader"]
         },
      ]},
 
    devServer: {
        //可以是相对路径
        contentBase: "./dist",
        open: true,
        port: 8080,
      },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
          //选择html模板
          title: "首页",
          template: "./src/index.html",
          filename: "index.html",
        }),
      ],
};

1.安装

2.配置

3.webpack配置核心概念

相关推荐