webpack学习笔记cindy Liu8 MinutesJanuary 22, 2019

模块化

在es6之前，由两种模块化规范：CommonJS 和 AMD，而如今ES6模块化已经逐渐取代了两者，成为浏览器和服务器通用的模块解决方案

//导入
import { readFile } from 'fs';
import React from 'react'

//导出
export function hello() {}
export default {
    // ...
}

拓展：在ES6模块特性中，import时如何正确使用花括号’{ }’ 当引用的文件由默认导出的

default ``` 语法时才不需要'{}'

###### webpack大致使用如下:

module.exports = {
// 所有模块的入口，webpack从入口开始递归解析出所有依赖的模块
entry: ‘./app.js’,
output: {
// 把入口依赖的所有模块打包成一个文件bundle.js输出
filename: ‘bundle.js’
}
}

###### webapck 优点：
- 专注于处理模块化的项目，做到开箱即用
- 通过Plugin扩展，完整好用不失灵活
- 使用场景不仅限于web开发
- 社区庞大活跃
- 良好的开发体验
- （与 create-reate-app脚手架紧密结合，便利开发）

###### 缺点：
- 只能用于采用模块化开发的项目

##### 使用Loader
webpack把一切文件看作模块，css文件也不例外，但是webpack如果要支持非js类型的文件，要使用Loader机制。

const path = require(‘path’);
const ExtractTextPlugin = require(‘extract-text-webpack-plugin’);

module.exports = {
// JavaScript 执行入口文件
entry: ‘./main.js’,
output: {
// 把所有依赖的模块合并输出到一个 bundle.js 文件
filename: ‘bundle.js’,
// 把输出文件都放到 dist 目录下
path: path.resolve(__dirname, ‘./dist’),
},
module: {
rules: [
{
// 用正则去匹配要用该 loader 转换的 CSS 文件
test: /.css$/,
use: ExtractTextPlugin.extract({
// 转换 .css 文件需要使用的 Loader
use: [‘css-loader’],
}),
}
]
},
plugins: [
new ExtractTextPlugin({
// 从 .js 文件中提取出来的 .css 文件的名称
filename: [name]_[contenthash:8].css,
}),
]
};

##### 使用Plugin
可以把注入到bundle.js文件里的css提取到单独的文件中，修改配置如下：

const path = require(‘path’);
const ExtractTextPlugin = require(‘extract-text-webpack-plugin’);

module.exports = {
// JavaScript 执行入口文件
entry: ‘./main.js’,
output: {
// 把所有依赖的模块合并输出到一个 bundle.js 文件
filename: ‘bundle.js’,
// 把输出文件都放到 dist 目录下
path: path.resolve(__dirname, ‘./dist’),
},
module: {
rules: [
{
// 用正则去匹配要用该 loader 转换的 CSS 文件
test: /.css$/,
use: ExtractTextPlugin.extract({
// 转换 .css 文件需要使用的 Loader
use: [‘css-loader’],
}),
}
]
},
plugins: [
new ExtractTextPlugin({
// 从 .js 文件中提取出来的 .css 文件的名称
filename: [name]_[contenthash:8].css,
}),
]
};

##### 核心概念
- entry ：入口，webpack执行构建的第一步。
- moudule：模块，一个模块对应一个文件，Webpack会从配置的entry开始递归找出所有依赖的模块
- chunk：代码块，一个chunk由多个模块组合而成，，用于代码合并与分割。
- Loader：模块转换器，用于把原内容转换成新内容
- Plugin:扩展插件
- output：输出结果

背：entry module chunk loader plugin output


##### webpack强大功能
###### 生成source maps (使调试更容易)
webpack在打包时为我们生成source maps，提供了一种对应编译文件和源文件得方法。使得编译后的代码可读性更高。

在webapck的配置文件中配置source maps,需要配置devtool。有以下四种不同的配置选项


devtool选项 | 配置结果
---|---
sourrce-map | 在一个单独的文件中产生一个完整且功能完全的文件，这个文件具有最好的source map，但是它会减慢打包速度
cheap-module-source-map | 在一个单独的文件中生成一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列。 
eval-source-map | 使用eval打包源文件模块，在同一个文件中申城干净的source map，这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的js文件的执行具有性能和安全隐患
cheap-module-eval-source-map | 这是在打包文件时最快的生成source map 的方法，生成的source map会和打包后的js文件同行显示，没有列映射。

正如上表所示，由上到下速度越来越快，不过同事也具有越来越多的负面作用

module.exports={
devtool: ‘eval-source-map’,
entry: _dirname + ‘/app/main.js’,
output: {
path: _dirname + “/public”,
filename: “bundle.js”
}
}

`