webpack 入门

webpack

webpack

webpack 是一个模块化加载工具，同时支持AMD、CMD等加载规范。三点优势：

1.代码分割：支持同步和异步两种依赖加载
2.loaders：默认情况下，只能处理JS文件。通过加载器可以把其他类型的资源转化JS输出
3.插件机制：提供强大的插件系统

安装全局

	npm i webpack webpack-cli -g

一、初使用

npm init   //初始化
touch index.js   // 新建 在文件中输入代码
webpack index.js

当前json文件，webpack为全局

安装webpack当前开发环境依赖

npm i webpack webpack-cl -D

{
  "name": "test1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack" //自定义修改
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0"
  }
}

运行报错

npm run build
ERROR in Entry module not found: Error: Can't resolve './src' in 'E:\webpack'

编译的文件上一级由src文件夹包裹

请求文件路径位置

二、webpack 打包js的同时自动生成html，默认只打包js

npm install --save-dev html-webpack-plugin
touch webpack.config.js

npm run build  // 结果如下

三、webpack项目结构

官网详情地址

1、Entery Points

单一入口
人口文件可以在任意位置，哪怕不在src下

a、单一入口文件

    entry:'./src/index.js',

b.多个入口文件
1.数组形式，会两个1文件整合在一个文件下面

    entry:['./src/index.js','./src/login.js'],

2.对象形式，几个入口文件对应几个js文件

    entry:{
        home:'./src/index.js',
        login:'./src/login.js',
        list:'./src/list.js',
    },

2、Output

配置输出信息

filename 输出文件名
path 输出路径，不能用于html中的js引用。
publicPath 虚拟目录，自动指向path编译目录 (复制一份)

a.在entry强制输出也可以，改变的是filename

b.output

module.exports = {
    entry:'./src/index.js',
    mode:'development',
    output:{
        filename:'bundle.js'
    }
}

更多的时候，是名字命名一样，导致有时候文件改动，但js文件内容不变 【 hash 】

多入口文件一样。同一次编译的几个文件，hash码一样。[chunkhash]一样，但是是异步加载文件hash值

3、loader

webpack 只能理解 JavaScript 和 JSON 文件。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    entry:{
        index:'./src/index.js'
    },
    mode:'development',
    module:{
        rules:[
            // 查看css
            {
                test:/\.css$/,
                //先处理css-loader 再style-loader
                use:['style-loader','css-loader']
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin(
            {
                template:'./src/index.html'  //入口文件
            }
        )
    ]
}

index.css

.main{
    color:red
}

index.js

import './index.css'

console.log("Hello index.js")

less文件差不多，但要安装less less-loader。但现在我们样式并没有单独拎出来，是与JS并行加载的。ts也是雷同，注意单独配tsconfig.json，详情看官网

ExtractTextWebpackPlugin

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

注意：手写webpack配置项的时候，可能需要最新版本，兼容性问题

4、plugin

插件使用

插件自定义

webpack 插件是一个具有 apply 方法的 JavaScript 对象。apply 方法会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
  apply(compiler) {
    compiler.hooks.run.tap(pluginName, compilation => {
      console.log('webpack 构建过程开始！');
    });
  }
}

5、手动配置热更新

模块热替换(HMR - hot module replacement)功能会在应用程序运行过程中，替换、添加或删除 模块，而无需重新加载整个页面

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

devServer: {
  contentBase: './dist',
  hot: true
},
plugins: [
 new CleanWebpackPlugin(['dist']),
 new HtmlWebpackPlugin({
    title: '模块热替换'
}),
	new webpack.HotModuleReplacementPlugin()
],


  "scripts": {
    "dev": "webpack-dev-server"
  },

npm run dev