wepack4.0基础认识学习

迷迷糊糊做点啥
276 阅读2分钟

为什么会出现webpack 这类构建工具

1.ES6语法已经在前端开发领域普遍使用，然而很多浏览器依旧对ES6没有提供全面的兼容和支持。

2.前端三大框架里，例如React的JSX，VUE和Angular的指令都是浏览器无法识别的，需要编译

3.在CSS开发中，我们已经习惯使用less、sass等预编译工具，有了构建工具做编译转化，可以让我们开发效率更高，代码更好维护。

4.前端必不可少要使用图片等多媒体资源，构建工具可以对它们进行压缩。

5.当前的前端开发都是模块开发，也引入了大量的依赖包，为了让浏览器对代码的加载更快，以及代码不会被轻易识别和可读，
需要构建工具对代码进行压缩和混淆。

初次使用webpack

1.首先在我们要创建项目的文件下创建一个'package.json' -- 指令 'npm init -y'

2.新版本的'webpack'的按照需要'webpack' 和 'webpack-cli' -- 指令 'npm install webpack webpack-cli --save-dev'
    2.1.在'windows' 环境下想查看'webpack' 版本使用'.\node_modules\.bin\webpack -v'
    2.2.在'linux'环境下想查看 'webpack' 版本使用'./node_modules/.bin/webpack -v'

3.创建一个'webpack'的配置文件，默认配置文件是当前文件下的--'webpack.config.js'
    3.1.想自定义指定配置文件的目录使用'webpack --config 指定目录'

4.如果没有在'package.json'中'scripts'配置指令则想运行webpack 需要执行  '.\node_modules\.bin\webpack'
    4.1.如果是自定义文件位置的话 '.\node_modules\.bin\webpack webpack --config 指定目录'

5.可以再'package.json'中'scripts' 快速配置运行命令，这么配置后指令回去'.\node_modules\.bin'执行对应的配置
  运行指令为 -- 'npm run xxx'

对webpack.config.js有个初步了解

1.'webpack.config.js' 会配置我们在打包时候的入口，打包后的位置，以及一些其他内容
  • 看一下基本配置
module.exports = {
    mode: 'production',  // 环境
    entry: './src/index.js', // 打包的入口文件 注：如果不写entry默认是./src/index.js
    output: './dist/bundle.js', // 打包的输出文件  注：如果不写output默认是./dist/main.js
    module:{ // Loader 配置
        rules: []
    },
    plugins: [] // 插件配置
}

做一个简单的例子

1.项目结构目录说明
├── 'dist'             // 运行后生成的不是手动创建的
│   ├── 'bundle.js'       // 运行后生成的不是手动创建的
│   ├── 'index.html'      // 手动添加
├── 'node_modules'     // npm下载包都在这个文件夹
├── 'src'             // 整个工程文件目录
│   ├── 'hellowWebpack.js'         // 写逻辑的地方
│   ├── 'index.js'      // 打包的入口
├── 'package.json'
├── 'package-lock.json' // 锁版本包
└── 'webpack.config.js' // webpack 配置文件

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
}

hellowWebpack.js

document.write('webpack1')

index.js

import './hellowWebpack'

dist/index.html

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- 加一句吧打包后的js引入进来 -->
        <script src="./bundle.js"></script>
    </head>

    <body>

    </body>

</html>

关于执行

1.直接输入'.\node_modules\.bin\webpack'
2.在'package.json'  配置如下当然key 随便起名字可以不叫'build',运行的指令'npm run build'
    "scripts": {
        "build": "webpack" // webpack --config ./build/webpack.config.js 如果这么写就是指定配置文件在build文件夹下
     },
avatar
文章
阅读
粉丝