什么是webpack?
webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具，说白了就是前端项目工程化的具体解决方案。
功能：
- 将一个或多个 JS 文件打包成对应的文件；
- 将一个或多个 CSS 文件打包成对应的文件；
- 压缩代码，转译代码，构建build，代码分析；
- 处理游览器javaScript的兼容性，性能优化。
好处： 提高了前端开发效率和项目的可维护性。
纠正踩坑操作
基本安装
首先我们创建一个项目，初始化 npm，接着安装 webpack-cli，生成package.json配置文件
npm init -y
yarn add webpack webpack-cli -dev
安装 JQuery
npm install jquery -S
- es6 模块化导入 jquery
现在，我们将创建以下目录结构、文件：
|- /src
+ |- index.js
+ |- x.js
接下来 webpack 打包一下
npx webpack
生成dist文件，由于我们每次运行npx webpack时候会产生新的dist文件，我们可以在package.json里配置新命令： "build": "rm -rf dist && webpack这样每次执行都会删除旧的，在生成新的。
build": "rm -rf dist && webpack
现在，我们将创建以下目录结构、文件：
|- /assets
+ |- index.html
|- /src
+ |- index.js
+ |- x.js
+ |- x.css
使用一个配置文件webpack.config.js 需要新建
webpack的配置文件，webpack在真正开始打包之前，会先读取webpack.config.js，根据里面的配置对项目进行打包。
- 通过
require(...)引入其他文件 - 通过
require(...)使用 npm 下载的工具函数 - 使用 JavaScript 控制流表达式，例如
?:操作符 - 对 value 使用常量或变量赋值
- 编写并执行函数，生成部分配置 webpack.config.js
module.exports = {
mode: 'development',
}
package.json
"scripts": {
"dev": "webpack",//通过npm run dev执行
},
了解一下mode
mode 节点的可选值有两个，分别是：
① development
- 开发环境
- 不会对打包生成的文件进行代码压缩和性能优化
- 打包速度快，适合在开发阶段使用
② production
- 生产环境
- 不会对打包生成的文件进行代码压缩和性能优化
- 所有代码最小化，没有任何注释，给用户使用
- 打包速度很慢，仅适合在项目发布阶段使用
了解entry与output
webpack中有两个默认约定：默认打包入口文件src/index.js,默认输出文件路径：dist/main.js;
下面可以修改默认约定：
在webpack.config.js配置文件中，通过entry节点指定文件打包的入口(路径)，指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始；
通过output节点指定文件打包的出口，指示webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。
const path = require('path')
module..exports={
mode:"development",
entry: path.join(__dirname','./src/index.js'),
//__dirname:第一个参数，当前文件所处的那层目录
output: {
//path:patn.join(__dirname,'./dist'),默认导出地址可以不写
filename: 'bundle.js',
},
}
contenthash的作用
用于http添加缓存，生成在dist里文件名可以随时更新，这个协议是http响应头中cache-control webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'index.[contenthash].js'
},
};
了解loader与插件(plugins)
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）
插件(plugins)想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
x.js引入x.css ,index.js引入x.js
x.js的内容
import './x.css'
export default 'xxx';
index.js内容
import x from './x.js'
引入CSS (css-loader)
首先，你需要先安装 css-loader：
yarn add style-loader --dev
yarn add css-loader --dev
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
}
引入html (HtmlWebpackPlugin)
安装
yarn add html-webpack-plugin --dev
webpack.config.js
plugins: [
new HtmlWebpackPlugin({
title: 'xdml-web前端',
template: 'src/assets/index.html'
}),
],
当我直接yarn start 运行报错，index.js 页面404，在服务器上加载不出来,于是我查资料看到# webpack-dev-server 可以快速开发，并不会生成dist
安装
yarn add webpack-dev-server --dev
webpack.config.js
mode: 'development'
修改配置文件，告知 dev server，从什么位置查找文件：
devtool: 'inline-source-map',
devServer: {
+ static: './dist',
+ },
我们添加一个可以直接运行 dev server 的 script：
"start": "webpack serve --open",
把CSS抽成文件 mini-css-extract-plugin
安装
yarn add -D mini-css-extract-plugin
webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
plugins: [
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css",
chunkFilename: "[id].[contenthash].css",
}),
],
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "../",
},
},
"css-loader",
],
可以将开发模式和生产模式同时配置，这样我们就不用切换
- 开发模式 webpack.config.js
mode: 'development'
引入CSS (css-loader)
- 生产模式webpack.config.js
mode: 'production'
把CSS抽成文件 mini-css-extract-plugin,可以在自动生成文件名和后缀
引入SCSS
yarn add sass-loader dart-sass --dev
