webpack学习笔记——入门篇
webpack讲解分析
1、什么是Webpack？
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件
2、为什要使用WebPack？
现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法
-
模块化，让我们可以把复杂的程序细化为小的文件;
-
类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；
-
Scss，less等CSS预处理器
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。
3、webpack基本概念
1、mode模式
webpack 提供 mode 配置选项，配置 webpack 相应模式的内置优化，mode有以下三个可选值。webpack会根据mode在编译打包时执行不同的操作优化。
| 属性选项 | 说明 |
| developmetn | 生产环境，就是除了开发环境（本地环境）以外的环境，只要往线上走，mode都是production development 模式下，将侧重于功能调试和优化开发体验，包含如下内容：
|
| production | production 模式下，将侧重于模块体积优化和线上部署：
|
| none | 选择 none 也可以，但是会有一个 warning |
// webpack.config.js
module.exports = {
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
}2、入口文件（entry）
入口文件，类似于其他语言的起始文件。比如：c 语言的 main 函数所在的文件。入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
具体属性可参考：webpack入门之mode和entry
可以在 webpack 的配置文件中配置入口，配置节点为： entry,当然可以配置一个入口，也可以配置多个。
// webpack.config.js
module.exports = {
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
}3、输出（output）
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程。
具体属性可参考：webpack入门之output输出
// webpack.config.js
module.exports = {
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
}
4、loader和moudle
模块转换器，用于将模块的原内容按照需求转换成新的内容。loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
例如，将A文件进行编译形成B文件，这里操作的是文件，比如将A.scss或A.less转变为B.css，单纯的文件转换过程；在webpack3.x中还保留之前版本的loaders，与rules并存都可以使用，在新版中完全移除了loaders，必须使用rules。相比于grunt和gulp，webpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件。
// webpack.config.js
module.exports = {
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
{
test: /\.js$/,
loader: 'babel-loader',
include: path.resolve(__dirname, 'src')
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
]
},
}rules
配置模块的读取和解析规则，通常用来配置loader。其类型是一个数组，数组里的每一项用来描述如何处理指定的文件，基本配置如下
- 条件匹配：通过test、include、exclude三个配置项来选中loader要应用的规则
- 应用规则：对选中的文件通过use配置项类应用loader，可以只应用一个loader或者按照从右往左的顺序应用一组loader，同时可分别向loader传递参数
- 重置顺序：一组loader的执行顺序默认是从右向左，通过enforce可以将其中一个loader的执行顺序放到最前或者最后
5、插件plugin
plugin是用于扩展webpack的功能，各种各样的plugin几乎可以让webpack做任何与构建先关的事情。
plugin的配置很简单，plugins配置项接收一个数组，数组里的每一项都是一个要使用的plugin的实例，plugin需要的参数通过构造函数传入。
具体属性可参考：webpack入门之plugin
webpack常用插件： 常用插件汇总
// webpack.config.js
module.exports = {
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
]
},
plugins: [
new HtmlWebpackPlugin({ // 打包输出HTML
title: 'Hello World app',
minify: { // 压缩HTML文件
removeComments: true, // 移除HTML中的注释
collapseWhitespace: true, // 删除空白符与换行符
minifyCSS: true// 压缩内联css
},
filename: 'index.html',
template: 'index.html'
}),
]
}6、Resolve
Resolve解析，webpack在启动后会从配置入口的模块出发找出所有依赖的模块，resolve在其中发挥的作用就是告诉webpack如何查找文件，虽然webpack有内置的解析功能，但是resolve支持我们自定义查找规则
7、Chunk
chunk代码块，一个chunk由多个模块组合而成，用于代码合并和分割
4、webpack安装
请确保安装了 Node.js 的最新版本。而且已经在您的项目根目录下已经初始化好了最基本的package.json文件
1、本地webpack安装
$ npm install --save-dev webpack
# 如果你使用 webpack 4+ 版本，你还需要安装 CLI。
npm install --save-dev webpack-cli安装完成后，可以添加npm的script脚本
// package.json
"scripts": {
"start": "webpack --config webpack.config.js"
}5、完成demo实例
这里给大家推荐一篇demo入门的实例，讲解非常详细，感兴趣的可以点击下面链接查看：
webpack快速入门完整 demo