webpack初见

跳动的字节

2020-03-26 221 阅读3分钟

webpack是什么?

我们来看一张图,这个在打开官网时最先看到的就是这张图了,几乎网上讲webpack的教程都会放上这张图

webpack是模块打包工具(webpack is a module bundler)

Webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript,es6等),并将其打包为合适的格式以供浏览器使用

webpack配置文件

在零配置的情况下是很弱的,一般我们都要自定义配置

module.exports = {  
    entry: "./src/index.js",//默认的⼊口⽂件  
    output: "./dist/main.js"//默认的输出 
};

当我们执行npx webpack 表示默认./src/index.js的入口模块,默认打包后放在dist目录下,打包后的名称是main.js

通过默认配置文件webpack.conﬁg.js,我们可以按需配置

npx webpack 
//执⾏命令后,webpack会找到默认的配置文件,并使用该配置来执行

指定特定的配置文件可以用--config来指定 npx webpack --config webpackconfig.js
可以通过在package.json文件下的script里面配置后用npm run xxx的方式来启动,其原理是局部安装的模块会在node_modules/.bin目录下常见一个软连接
```
"scripts":{  
    "bundle":"webpack" 
}
```

Webpack.conﬁg.js配置结构

module.exports = {
    entry: "./src/index.js", //打包⼊口文件  
    output: "./dist", //输出结构  
    mode: "production", //打包环境  
    module: {
        rules: [
            //loader模块处理    
            {
                test: /\.css$/,
                use: "style-loader"
            }
        ]
    },
    plugins: [new HtmlWebpackPlugin()] //插件配置 
};

Webpack配置的核心概念

entry入口

指定webpack打包的入口文件

webpack执行构建的第一步是从entry入口开始的,可以理解成输入

//单⼊⼝ SPA，本质是个字符串
entry: { main: './src/index.js' } 
//可以简写成
entry: "./src/index.js"
//多⼊⼝ entry是个对象 
entry: {
    index: "./src/index.js",
    login: "./src/login.js"
}

output输出(出口)

打包转换后的文件输出到磁盘位置即输出的结果

output: {    
    filename: "bundle.js",//输出⽂件的名称
    path: path.resolve(__dirname, "dist")//输出⽂件到磁盘的⽬录,必须是绝对路径 
},
//多入口处理
output {
    filename: "[name][chunkhash:8].js",//利用占位符,⽂件名称不要重复
    path: path.resolve(__dirname, "dist")//输出文件到磁盘的目录,必须是绝对路径
}

mode模式

mode用来指定当前构建的环境
1. production
2. development
3. none
4. 如果没有设置,webpack会将mode 的默认值设置为production
如果设置了mode,则可以触发webpack内置的函数,达到优化打包的效果

loader

loader用于对模块的源代码进行转换,模块解析器,⽤用于把模块原内容按照需求转换成新内容
webpack是模块打包工具,所有的一切都是模块
但,webpack默认只内置处理js和json模块,对于其他格式的模块,就要引入对应的loader才能正确处理

loader有顺序,从右到左,从上到下

{
    test: /\.css$/,
    use: ["style-loader", "css-loader"]
}

常见的loader如下

file-loader
- 处理静态资源模块例如图片
- 原理是把打包⼊口中识别出的资源模块,移动到输出目录,并且返回⼀个地址名称

url-loader

url-loader内部使用了file-loader,所以可以处理file-loader所有的事情,但是在jpg格式的模块时,会把该图片转换成base64格式字符串,并打包到js里面
对于小体积的图片可以做性能优化,大图不适合,可配置

module: {
    rules: [
        {   test: /\.(png|jpe?g|gif)$/,
            use: {
                loader: "url-loader",
                options: {
                    name:"[name]_[hash].[ext]",
                    outputPath: "images/", //⼩小于2048，才转换成base64
                    limit: 2048
                }
            }
        }
    ]
}

postcss-loader
1. 样式自动添加前缀
2. 需要配合autoprefixer一起
3. npm i postcss-loader autoprefixer -D

其它常见loader

style-loader//把css-lader生成的内容,以style挂载到页面的header部分
css-loader//分析css模块之间的关系,并合成一个css
less-loader//把less语法转换成css
sass-loader
postcss-loader//样式自动添加前缀
ts-loader //将Ts转换成js
babel-loader//转换ES6、7等js新特性语法 
eslint-loader //等等

module模块

在webpack里一切皆模块,一个模块对应一个文件,wepack会从配置的entry入口开始递归的找出所有依赖的模块
当处理到不认识的模块时,需要在webpack中的module里做相应的配置,即检测到什么格式的模块,就是要什么特定的loader来处理之

module:{  
    rules:[  
        {    
            test:/\.xxx$/,//指定匹配规则    
            use:{
                loader: 'xxx-load'//指定使⽤用的loader
            }
        } 
    ]
}

plugins 插件

不同的插件可以在webpack打包的某个阶段,帮我们做一些特定的事,有点像生命周期的样子
作用于整个构建过程
插件需要先引入,再new 实例化后使用
常见的插件
1. HtmlWebpackPlugin
  - 会在打包结束后,自动生成一个html文件,并把打包生成的js模块引入到该html中
2. clean-webpack-plugin
  - 自动删除webpack里的output.path
3. mini-css-extract-plugin
  - webpack4.0才能使用

sourceMap

源码与打包后的代码的映射关系
在dev模式中,默认开启,关闭的话,可以在配置文件里设置devtool:'none'
devtool选项控制是否生成,以及如何生成 source map
devtool值得含义
- eval: 速度最快,使用eval包裹模块代码
- source-map:产生.map文件
- cheap:较快,不包含loader对应的sourcemap
- module:第三方模块,包含loader的sourcemap
- inline:将.map作为DataURI嵌入,不单独生成.map文件
- 推荐配置
```
devtool:"cheap-module-eval-source-map",//开发环境配置
devtool:"cheap-module-source-map",// 线上生产配置
```

WebpackDevServer

开发时运行的服务器
提升开发效率
修改保存后自动重新打包,刷新
不再生成dist目录,而是将文件放到内存中,来提高速度
可设置代理,解决跨域问题