webpack学习笔记

1、一个最简单的webpack项目

初始化的webpack项目的基本配置：

①webpack.config.js：是webpack默认配置文件

②package.json：主要定义整个项目信息

③package-lock.json：npm install后生成的文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号

④src：源代码

⑤node_modules：项目依赖包

⑥dist：建构后输出的代码

2、webpack.config.js
webpack在执行时，除在命令行传入参数，还可以通过制定的配置文件来执行。默认会搜索当前目录下webpack.config.js。这个文件是一个node.js模块，返回一个json格式的配置对象，或者通过–config选项来制定配置文件。或者在package.json中的scripts标签内通过webpack的属性值来指定。

webpack是基于node的

//创建webpack.config.js

var webpack = require('webpack');
module.exports = {
    entry:'', //入口文件
    output:{}, // 输出文件
    module:{}, // 模块
	resolve: {}, //其他解决方案配置
    plugins:[], //插件
	devServer: {}, // 开发服务器配置
	mode: 'development' // 模式配置
}

1.入口（entry）:
入口指的是webpackage应该使用哪个模块，来作为构建其内部依赖图的开始。默认值为./src

多入口文件：

多入口文件有两种实现方式进行打包：一种是没有关系的但是要打包到一起去的，可以写一个数组，实现多个文件打包；另一种就是每个文件都单独打包成一个文件的。

下面来看看两种方式的写法：

module.exports = {
    // 1.写成数组的方式就可以打出多入口文件，不过这里打包后的文件都合成了一个
    // entry: ['./src/index.js', './src/login.js'],
    // 2.真正实现多入口和多出口需要写成对象的方式
    entry: {
        index: './src/index.js',
        main: './src/main.js'
    },
    output: {
        // 1. filename: 'bundle.js',
        // 2. [name]就可以将出口文件名和入口文件名一一对应
        filename: '[name].js',      // 打包后会生成index.js和main.js文件
        path: path.resolve('dist')
    }
}

2.出口（output）
output属性表示哪里输出它所创建的bundles，以及如何命名这些文件，默认值为./dist

常用属性：

①path：输出路径

②filename：对应entry里面生成出来的文件名

③chunkFilename：按需异步加载的js

3.module：
是对于不同的模块的处理规则。

rules属性代表不同的处理规则。对象的属性有test、use、exclude、include。

①test设置要匹配文件扩展名的正则表达式

②use属性是对象数组，从后往前解析，对象的参数为loader/options。可以简写。

loader是要使用的loader

module:{
  	rules:[
  	{
  		test:/\.css$/,
  		use:[{loader: "style-loader"},{loader: "css-loader"}]
 }]
简写如下：

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

③exclude：包含的文件

④include：包含的目录

下面举几个常用的例子：

<1>引用CSS文件
可以在src/index.js里引入css文件，到时候直接打包到生产目录下

需要下载一些解析css样式的loader

npm i style-loader css-loader -D
// 引入less文件的话，也需要安装对应的loader
npm i less less-loader -D
配置css文件的解析

import './css/style.css';   // 引入css
import './less/style.less'; // 引入less

console.log('这里是打包文件入口-index.js');

// webpack.config.js
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,     // 解析css
                use: ['style-loader', 'css-loader'] // 从右向左解析
                /* 
                    也可以这样写，这种方式方便写一些配置参数
                    use: [
                        {loader: 'style-loader'},
                        {loader: 'css-loader'}
                    ]
                */
            }
        ]
    }
}

此时打包后的css文件是以行内样式style的标签写进打包后的html页面中，如果样式很多的话，我们更希望直接用link的方式引入进去，这时候需要把css拆分出来。

extract-text-webpack-plugin插件可以将打包到js里的css文件进行一个拆分

<2>拆分CSS
// @next表示可以支持webpack4版本的插件

npm i extract-text-webpack-plugin@next -D

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
// 拆分css样式的插件
let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filaneme: 'bundle.js',
        path: path.resolve('dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextWebpackPlugin.extract({
                    // 将css用link的方式引入就不再需要style-loader了
                    use: 'css-loader'       
                })
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
        // 拆分后会把css文件放到dist目录下的css/style.css
        new ExtractTextWebpackPlugin('css/style.css')  
    ]
}

此时拆分完css后，打包html页面就以link的方式去引入css

<3>vue-cli中常用loader配置
rules: [
{
test: /.vueKaTeX parse error: Expected 'EOF', got '}' at position 73: …erConfig }̲, { …/,
loader: ‘babel-loader’,
include: [resolve(‘src’), resolve(‘test’)]
},
{
test: /.(png|jpe?g|gif|svg)(?.)?KaTeX parse error: Expected 'EOF', got '}' at position 153: … } }̲, { …/,
loaders: [“style”, “css”, “sass”]
},
{
test: /.(woff2?|eot|ttf|otf)(?.)?$/,
loader: ‘url-loader’,
query: {
limit: 10000,
name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]’)
}
}
]
}

4.resolve：
webpack在构建包的时候会按目录的进行文件的查找，resolve属性中的extensions数组中用于配置程序可以自行补全哪些文件后缀

还是在此处使用别名。

alias: {
  '@': resolve('src')
}

5.plugins（插件）：
插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。

由于插件可以携带参数/选项，必须在webpack配置中，向plugins属性传入new实例。

例如：

文件打包好了，但是我们在使用的时候不能在dist目录下去创建一个html文件，然后去引用打包后的js。这并不合理，实际开发中也不会这样。

这时候需要用到一个常用的插件，html-webpack-plugin，使用插件之前都需要安装插件

然后在webpack.config.js中引用并使用它

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.[hash:4].js',   
        path: path.resolve('dist')
    },
    plugins: [
        // 通过new一下这个类来使用插件
        new HtmlWebpackPlugin({
            // 用哪个html作为模板
            // 在src目录下创建一个index.html页面当做模板来用
            template: './src/index.html',
            hash: true, // 会在打包好的bundle.js后面加上hash串
        })
    ]
}

如果是多页面开发的话，就需要配置多页面

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // 多页面开发，怎么配置多页面
    entry: {
        index: './src/index.js',
        main: './src/main.js'
    },
    // 出口文件  
    output: {                       
        filename: '[name].js',
        path: path.resolve('dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',   
            filename: 'index.html',
            chunks: ['index']   // 对应关系,index.js对应的是index.html
        }),
        new HtmlWebpackPlugin({
            template: './src/main.html',
            filename: 'main.html',
            chunks: ['main']   // 对应关系,login.js对应的是main.html
        })
    ]
}

6.devServer
devServe是启动本地静态服务

启动一个静态服务器，默认会自动刷新，当每次对源码文件进行修改并保存后，浏览器会默认刷新一次展现修改后的效果

module.exports = {
    devServer: {
        contentBase: './dist',
        host: 'localhost',      // 默认是localhost
        port: 3000,             // 端口
        open: true,             // 自动打开浏览器
    }
}

在npm run dev命令下，打包的文件存在于内存中，并不会产生在dist目录下

在vue-cli中，在build目录中会有一个dev-server.js的配置文件供我们开启本地服务器，在里面可以做详细配置。这个配置文件是命令npm run dev和npm run start的入口配置文件，主要用于开发环境。

3、package.json文件详细解释
node执行js中require的时候，也会根据package.json中的依赖项查找。

每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息。npm install命令会根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

最简单的package.json文件，只定义两项元数据：项目名称和项目版本。

{
  "name": "daily-clean",
  "version": "1.0.0",
}

package.json文件就是一个JSON对象，该对象的每一个成员就是当前项目的一项设置。

package.json文件分为必选字段和可选字段

1.必选字段
①name: 项目名称

全部小写，没有空格，可以使用下划线或横线

②version：项目版本号

x.x.x的格式，符合“语义化版本规则”

2.可选字段
①title：标题

②author：作者

“author”: “liuyan liuyan@daojia-inc.com”,

③homepage：项目url主页

④repository：用于指示代码存放的位置

“repository”: {
“type”: “git”,
“url”: “https://github.com/xxx”
}
⑤bugs：问题追踪系统的url或者邮箱地址

⑥devDependencies：指定项目开发所需要的模块

⑦scripts（Object）

key是生命周期事件名，value是在事件点要跑的命令。

scripts指定了运行脚本命令，比如dev指定了运行npm run dev时，所要执行的命令

  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "deploy": "node build/deploy.js",
    "sendmiddle": "node build/send-middle",
    "bp": "npm run build && jz",
    "bpprod": "npm run build prod && npm run deploy prod",
    "bpsandbox": "npm run build sandbox && npm run deploy sandbox"
  },

⑧dependencies

指示当前包所依赖的其他包

  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "deploy": "node build/deploy.js",
    "sendmiddle": "node build/send-middle",
    "bp": "npm run build && jz",
    "bpprod": "npm run build prod && npm run deploy prod",
    "bpsandbox": "npm run build sandbox && npm run deploy sandbox"
  },

⑦license：授权方式

⑧main：main字段指定了加载的入口文件。这个字段的默认值是模块根目录下面的index.js

⑨config（对象）：config对象中的值在scripts的整个周期中皆可用，专门用于给scripts提供配置参数

⑩bin

许多包有一个或多个可执行文件希望被安装到系统路径。在npm下要这么做非常容易(事实上，npm就是这么运行的)。

这需要在你的package.json中提供一个bin字段，它是一个命令名和本地文件名的映射。在安装时，如果是全局安装，npm将会使用符号链接把这些文件链接到prefix/bin，如果是本地安装，会链接到./node_modules/.bin/。

这个字段对应的是一个map，每个元素对应一个{命令： 文件名}

  "bin": {
    "deploy:static": "./bin/deploy_static.js"
  },

⑪engines

engines字段指明了该模块运行的平台，比如node 的某个版本或者浏览器，

既可以指定npm 版本

也可以指定npm 版本

  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },