Webpack学习笔记

Posted on | Post modified: |

是什么和为什么

在了解webpack是什么之前，我们需要知道前端的一个巨大的坑————浏览器在解析JS的时候有一个盲点，它并没有做到解析其它语言时的模块化，一个文件要给另一个文件暴露数据或者变量，只能将它定义在全局作用域下，没有其它的办法。所以归根结底就是我们web标准的问题，在一开始的时候没有考虑到文件之间共享代码/数据的问题。webpack解决的就是这个问题，我们用写后端语言的方式写前端的代码，前端就无法识别(因为前端无模块化体系)，webpack就可以做到动态地把后端的代码编程浏览器能够读懂的代码，也就是[后端代码前端化]。
webpack————用后端的方式让浏览器读懂我们的代码，并且让我们的代码更加模块化。

webpack4 零模块打包器

webpack4不需要配置文件!!!!!!yeah

安装

由于webpack是跑在node环境下的，所以我们首先要安装node(安装node后自带npm命令)。安装完毕后可以输入命令node -v和npm -v查看版本号。如果有版本信息证明安装成功。

  • 全局安装
    npm i webpack -g
    全局安装完毕后即可在任何一个目录下运行webpack命令。(如:webpack a.js bundle.js 入口文件-a.js 打包后的文件-bundle.js)
    全局安装的弊端: 有的时候项目中我们写的配置文件可能是针对某一版本的webpack，换一台机器，这台机器全局安装的webpack版本可能与我们项目中想要的webpack版本不一致，这就可能出问题。所以一般比较推荐局部安装。
  • 局部安装
    首先进入项目目录，输入命令npm init -y，生成一个package.json文件，生成这个文件后，npm就会认为整个目录就是一个项目/模块了。然后在当前目录下安装webpack。输入命令npm i webpack -D或者npm i webpack --save-dev。安装完webpack后我们还需要webpack-cli。输入命令npm i webpack-cli --save-dev。安装完毕后我们就会在package.json中看到版本信息了。以后我们的项目运行在其它平台上，只需要npm install就可以了。

    配置

    打开package.json，添加一个build(构建)脚本:
    1
    2
    3
    "scripts": {
        "build":"webpack",
    }

然后npm run build。会发现报错信息: ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack-4-quickstart'。
这是因为webpack4在./src中寻找entry point(入口点)。也就是说entry point是webpack寻找开始构建Javascript包的文件。在以前版本的 webpack 中，必须在名为 webpack.config.js 的配置文件中通过entry属性定义entry point(入口点) 。但是从webpack4 开始，不再必须定义entry point(入口点)，它将默认为 ./src/index.js!!!!
在webpack4中，既不需要定义entry point(入口点)，也不需要定义output file(输出文件)。
它将查找./src/index.js作为默认入口点，而且，它将在./dist/main.js输出模块包。

entry和output

当业务逻辑比较复杂，可能有不止一页，这时我们就需要多入口和多出口:

1
2
3
4
5
6
7
8
9
10
module.exports = {
    entry: {
        home: './js/home.js', //首页的入口文件
        signup: './js/signup.js', //注册页的入口文件
    },
    output: {
        filename: '[name].bundle.js',
        path: __dirname + '/dist',
    }
}

ES6写法
直接解构，将对象中的键编程一个变量，可以直接用。更加简洁~

1
2
3
4
5
//在index.js中
var open = false;
export {open};
//在home.js中
import {open} from './index.js';

production(生产)和development(开发)模式-webpack4

打开package.json并填充scripts部分

1
2
3
4
"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

运行npm run dev。会生成一个未压缩的bundle文件。
运行npm run build。会生成一个压缩后的bundle文件。
production mode(生产模式)可以开箱即用地进行各种优化。包括压缩，作用域提升，tree-shaking等。
development mode(开发模式)针对速度进行了优化，仅仅提供了一种不压缩的 bundle 。

所以在 webpack 4中，可以在没有一行配置的情况下完成任务！只需定义–mode参数即可免费获得所有内容。

覆盖默认entry(入口)和output(出口)-webpack4

打开package.json

1
2
3
4
"scripts": {
  "dev": "webpack --mode development ./foo/src/js/index.js --output ./foo/main.js",
  "build": "webpack --mode production ./foo/src/js/index.js --output ./foo/main.js"
}

loader

webpack本身就能理解js，所以import JS时不需要loader，如果我们import的是其它东西就需要用到loader，比如import ‘./css/base.css’。这时我们就需要指挥webpack如何加载这个css文件。这就是loader的职责。
CSS用css-loader和style-loader，在使用之前我们需要安装。
npm i css-loader style-loader -D
安装完毕之后我们就需要在webpack.config.js中进行配置:

1
2
3
4
5
6
7
8
9
10
11
module: {
    rules: [
        {
            test: /\.css$/,
            //css-loader 将css文件编译成webpack可以理解的形式 
            //style-loader 将编译之后的代码插入到head中
            // 从右往左加载
            use: ['style-loader', 'css-loader'], 
        }
    ]
}

0%