webpack入门(一)开发环境基本配置
webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。
一、webpack 的五个核心概念
Entry
入口指示，表示webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。
Output
输出指示，表示webpack打包后的资源 bundles 输出到哪里去，以及如何命名。
Loader
Loader能够让webpack去处理那些非js和json文件。webpack自身只能处理js和json文件。
plugins
插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
Mode
模式指示，webpack 使用相应模式的配置。只有两个值：development 和 production。
二、Getting Started
全局安装或升级 webpack
npm install webpack webpack-cli -g
初始化 package.json
创建项目文件夹并进入，然后键入：
npm init 或 npm init -y
下载并安装 webpack 开发依赖
npm install webpack webpack-cli -D
webpack命令
webpack --help #帮助命令
webpack -v #版本信息
编译打包应用
webpack --entry ./src/index.js -o ./build --mode development
webpack 会以 ./src/index.js为入口文件开始打包，打包后输出到 ./build 目录下，整体打包环境为 开发环境。
webpack --entry ./src/index.js -o ./build --mode production
webpack 会以 ./src/index.js为入口文件开始打包，打包后输出到 ./build 目录下，整体打包环境为 生产环境。
注意：
1、webpack 可以打包js和json 资源，不能直接处理css和img等其他资源。
2、生产环境会比开放环境多一个压缩js代码。
3、生产环境和开发环境会将ES6模块化编译成浏览器识别的模块化。
三、webpack 开发环境的基本配置
在项目的根目录下需手动创建webpack.config.js文件。结构如下：
/**
* webpack.config.js 为webpack的配置文件
* 当运行webpack指令时，会加载里面的配置
*/
/**
* 所有的构建工具都是基于nodejs平台运行的。模块化默认采用commonjs
*/
//resolve 是用来拼接绝对路径的方法
const { resolve } = require('path');
module.exports = { //webpack配置
//入口启点
entry: "./src/index.js",
//输出
output: {
filename: "js/index.js", //输出文件存放的目录及文件名
//__dirname 是nodejs的变量，代表当前文件的目录的绝对路径
path: resolve(__dirname, 'build'),
//Not all ecosystem tooling is ready for the new default automatic
publicPath via output.publicPath: "auto"
//Use a static output.publicPath: "" instead.
publicPath: ""
},
//loader的配置
module: {
rules: []
},
//插件的配置
plugins: [
],
//模式
// mode:"production",
mode: "development"
};
打包css资源的配置
module.exports = {
//loader的配置,不同文件资源必须配置不同的loader处理
module: {
rules: [
//...
{
test: /\.css$/i,
use: ["style-loader", "css-loader"]
}
]
}
}
style-loader 的作用是创建style标签将样式引入，css-loader的作用是将css文件整合到js中。
打包less资源的配置
module.exports = {
//省略其他配置
//loader的配置,不同文件资源必须配置不同的loader处理
module: {
rules: [
//省略其他loader的配置
{
test: /\.less$/i,
use: ["style-loader", "css-loader", "less-loader"]
}
]
}
｝
打包图片资源的配置
module.exports = {
//省略其他配置
module: {
rules: [
//省略其他loader的配置
//处理url图片资源(background: url(./vue.jpg);)，但是处理不了html中直接引用的图片资源(<img src="./angular.jpg" alt="" />)
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'url-loader', //或 file-loader
options: {
limit: 8 * 1024,
//Specify a filesystem path where the target file(s) will be placed.
outputPath: 'images',
},
},
]
},
//处理html中直接引用的图片资源(<img src="./angular.jpg" alt="" />)
{
test: /\.html$/i,
use: "html-loader"
}
]
}
}
html模板资源
html的加载不是通过loader而是使用插件的方式
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
module.exports = {
//loader的配置,不同文件资源必须配置不同的loader处理
//插件的配置
plugins: [
//html-webpack-plugin
//功能：默认会创建一个空的html，并且自动引入打包输出的所有资源
// new HtmlWebpackPlugin(),
//复制./src/test.html文件，并且自动引入打包输出的所有资源
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
注意：
loader 的使用步骤是: 1、下载 2、使用。而plugins的使用步骤是: 1、下载 2、引入 3、使用
打包其他资源的配置
module.exports = {
//省略其他配置
module: {
rules: [
//省略其他loader的配置
{
//打包除.less .html ....之外的资源文件
exclude: /\.(less|html|css|png|jpeg|jpg|gif|js|json|ts)$/i,
loader: 'file-loader',
options: {
//Specify a filesystem path where the target file(s) will be placed.
outputPath: 'media',
},
}
]
}
}
编辑入口文件 ./src/index.js
//导入css资源
import "./style.css";
//导入json资源
import data from "./data.json";
//导入less资源
import "./test.less";
//js资源
console.log(data);
console.log("OK");
下载指定loader和plugin
npm i css-loader style-loader less less-loader html-webpack-plugin file-loader ..... -D
可能一次性下载不全，可以先运行，根据错误提示，继续安装。
然后运行指令：
webpack 或 webpack b 或 webpack bundle
四、开发服务器devServer
devServer用来自动编译、自动打开浏览器和自动刷新页面。
配置如下：
const { resolve, join } = require('path');
module.exports = {
//省略其他配置
devServer: {
contentBase: join(__dirname, 'dist'),
//启动gzip压缩
compress: true,
//访问端口
port: 3000,
//是否自动打开浏览器
open: true
}
};
devServe只会在内存中编译打包，不会有任何输出。
启动devServer的指令为：
webpack serve 或 webpack s
五、开发环境优化-HMR
HMR(hot module replacement):热模块替换。在默认情况下，一个模块任何一点小的改动都会触发devServer全部自动编译和自动刷新页面。HMR的作用是当一个模块发生变化，只会重新打包这个模块，而不是打包所有，从而提高效率。
样式文件:可以使用HMR功能，因为sytle-loader中内部实现了HMR功能。
html文件：默认不使用HMR功能，同时也会导致html文件不更新了,解决办法：修改entry入口，将html文件引入。但是，一般情况下，对于单页面应用不需要对html文件做HMR功能。
js文件：默认不使用HMR功能(更新所有)，需要修改入口文件js代码，添加支持HMR功能的代码。
//一旦module.hot有值，说明开启了HMR功能。
if(module.hot){
//监听./test.js文件的变化，一旦发生变化,会执行后面的回调函数。（其他js文件默认就不会重新打包构建了）
module.hot.accept('./test.js',function(){
//....
});
}
注意:
如有要开启HMR功能，需要先检查package.js中是否配置了browserslist选项。如果已配置了browserslist选项,需要将 webpack.config.js中的target指定为web。 target的作用是为webpack指定一个特定的环境，它的默认值是browserslist或web,当package.js中配置了browserslist选项，它的默认值就是browserslist,否则就是web。
