webpack学习笔记

发表于 | 更新于:

蜗牛般的学习webpack，用到一点记录一点

模块化

commonJs: 核心思想：通过require方法同步加载依赖的其他模块，通过module.exports导出暴露的接口

例：

1
2
导入： const moduleA = require('./moduleA')
导出： module.exports = moduleA.someFunc

AMD: 通过异步方式去加载模块依赖的模块，require.js

例：

1
2
3
4
5
6
7
//定义一个模块
define('module', ['dep'], function(dep) {
    return exports;
})

//导入和使用
require(['module'], function() {})

ES6模块化

1
2
3
4
5
6
7
8
9
10
11
12
13
//导入
import {readFile} from 'fs';
import React from 'react';
//导出
export function hello() {}
export default {}
``` 

* * *



### Webpack安装

安装到全局：npm i -g webpack
安装稳定版本：npm i -D webpack
安装指定版本：npm i -D webpack@
安装体验版本：npm i -D webpack

运行webpack:
1、node_modules/.bin/webpack
2、package.json中script: webpack –config webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12


* * *


#### 解析css文件模块
webpack一切皆模块，所以引入css文件使用：
`require('./main.css')`
webpack不原生支持css解析， 要支持非js的文件，需要使用webpack的Loader机制


webpack.config.js：

//在遇到.css结尾的文件时，loader执行顺序由后到前，先使用css-loader读取文件，再由style-loader将css内容注入到js里，minimize告诉css-loader开启压缩
module: {
rules: [
{
test: /.css$/,
use: [‘style-loader’, ‘css-loader?minimize’]
}

  //或者
  {
    test: /\.css$/,
    use: [
        'style-loader',
        {
            loader: 'css-loader'
            options: {
                minimize： true
            }
        }
    ]
  }
]

}

1
2
3
4
5
6
7
8
9
10
由于配置了 minimize： true， 打包出错：options should NOT have additional propertie， 去掉这个属性正常了

>此时，css样式内容在js文件中，但是页面样式却会生效，原来是style-loader的功劳。
>style-loader大概机制：在js文件中将css的内容包裹在字符串里存储，然后在网页执行js时动态地向html的head标签里插入html style标签

除了在配置文件里指定loader，也可以在源码中指定loader去处理文件：
`require('style-loader!css-loader?minimize!./main.css')`

#### Plugin
从js文件中提取css内容到单独的文件，需要使用插件

const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);
…
rules: [
{
test: /.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
publicPath: ‘../‘,
hmr: process.env.NODE_ENV === ‘development’,
},
},
‘css-loader’,
],
},
]
plugins: [
new MiniCssExtractPlugin({
filename: ‘[name].css’,
chunkFilename: ‘[id].css’,
})
]

1
2
3
4
5

### devServer
devServer会启动一个http服务器用于服务网页请求，同时会帮助启动webpack
安装：
package.json中配置

“scripts”: {
“dev”: “webpack –config webpack.config.js”,
“start”: “webpack-dev-server –open”
}

运行：npm start, 浏览器自动打开本地网页，自动打开归功于--open，否则只能手动输入网址打开页面
webapck-dev-server会将构建出的文件保存在内存中，它不会理会配置文件中的output.path属性，所以index.html引入js和css时要将url改为'./bundle.js'

>webpack命令启动后，会从entry里配置的module开始，递归解析entry里依赖的所有module，这些模块会以entry为单位分组，一个entry及其所有依赖的module都被分到一个组即一个chunk，最后webpack会将所有chunk转换为文件输出。

>context：`context: path.resolve(__dirname, 'app')`