文章目录
webpack.config.js 配置
- 结构目录
.
├── dist // 打包后的文件
├── src // 源码文件
| ├── css
| └── js
| └── index.html
| └── main.js // 这是 main.js 是我们项目的JS入口文件
├── package.json // npm init 生成的NPM包的所有相关信息，其中sprict可以脚本
├── .babelrc //将高级语法转换成低级语法
└── webpack.config.js // 配置webpack的配置文件
配置打包的文件的出入口
1.在上篇文章中使用的是webpack ./src/main.js -o ./dist/bundle.js，命令进行的打
包，因此使用配置文件后，可以在配置文件直接配置好打包
2.打包主要需要一个入口文件，和一个生成文件因此在配置文件中也要做到这两点
- webpack.config.js 配置出入口
1.需要导入一个路径包，一个webpack包
2.还需要使用 module.exports 将整个文件暴露出去
3.配置入口文件entry，和出口文件 output.
4.这次打包就不用输入那么长的指令，只需要在控制台输入webpack 即可
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry:path.join(__dirname,'/src/main.js') , // 入口，表示，要使用 webpack 打包哪个文件
output: { // 输出文件相关的配置
path: path.join(__dirname, '/dist'), // 指定 打包好的文件，输出到哪个目录中去
filename: 'bundle.js' // 这是指定 输出的文件的名称
},
}
- 配置webpack.config.json 打包
1.直接在控制台输入webpack 即可
- 执行顺序
1. 首先，webpack 发现，我们并没有通过命令的形式，给它指定入口和出口
2. webpack 就会去 项目的 根目录中，查找一个叫做 `webpack.config.js` 的配置文件
3. 当找到配置文件后，webpack 会去解析执行这个 配置文件，当解析执行完配置文件后，就得到了 配置文件中，导出的配置对象
4. 当 webpack 拿到 配置对象后，就拿到了 配置对象中，指定的 入口 和 出口，然后进行打包构建；
构建一个实时打包 – webpack-dev-server
1.每一次代码更给都要进行一次编译，因此有了webpack-dev-server 实时打包
2.你启动webpack-dev-server后，你在目标文件夹中,也就是这个项目中dist文件
夹，是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。因此使用
webpack-dev-server进行开发的时候都看不到编译后的文件.
- 安装
1.npm i webpack-dev-server --save-dev
- 配置启动
1.在packjson.json，配置快速启动webpack-dev-server 指令
"scripts": {
"dev": "webpack-dev-server"
},
2.输入npm run dev 执行webpack-dev-server( 见图具体分析)，生成的文件是在内存中的，在整个项目的根目录中
3.打开网址后，不是直接显示index 页面，想直接打开index页面需要将刚才的配
置改成:
"scripts": {
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot",
},
open // 自动打开浏览器
port: 3000, // 设置启动时候的运行端口
contentBase: 'src', // 指定托管的根目录
hot: true // 启用热更新 可以页面无刷新自动更新更改的代码
- 第二条
- 为什么放在内存中:
1.由于需要实时打包编译，所以放在内存中速度会非常快
- webpack.config.js 配置
const path = require('path');
const webpack = require('webpack'); // 启用热更新的 第2步
module.exports = {
entry:path.join(__dirname,'/src/main.js') , // 入口，表示，要使用 webpack 打包哪个文件
output: { // 输出文件相关的配置
path: path.join(__dirname, '/dist'), // 指定 打包好的文件，输出到哪个目录中去
filename: 'bundle.js' // 这是指定 输出的文件的名称
},
devServer: {
open: true, // 自动打开浏览器
port: 3000, // 设置启动时候的运行端口
contentBase: 'src', // 指定托管的根目录
hot: true // 启用热更新 的 第1步
},
plugins: [ // 配置插件的节点
new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步
],
}
对html配置 – html-webpack-plugin
1. 自动在内存中根据指定页面生成一个内存的页面
2. 自动，把打包好的 bundle.js 追加到页面中去，简单的说会帮我们将html 和js自
动做匹配
- 安装
1.npm i html-webpack-plugin --save-dev
- 配置启动
const htmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步
new htmlWebpackPlugin({ // 创建一个 在内存中 生成 HTML 页面的插件
template: path.join(__dirname, './src/index.html'), // 指定 模板页面，将来会根据指定的页面路径，去生成内存中的 页面
filename: 'index.html' // 指定生成在内存的页面的名称
})
],
- 图解
css配置 – loader
- loader 作用
1.webpack, 默认只能打包处理 JS 类型的文件，无法处理 其它的非 JS 类型的文件；
2.如果要处理 非JS类型的文件，我们需要手动安装一些 合适 第三方 loader 加载器；
- 安装
1.npm i style-loader css-loader --save-dev // 安装处理style 和css
2.npm i less-loader less -D // 安装处理less
3.npm i sass-loader node-sass --save-dev // 安装处理 sass
- 配置
1.打开 webpack.config.js 这个配置文件，在 里面，新增一个 配置节点，叫做
module, 它是一个对象；在 这个 module 对象身上，有个 rules 属性，这个 rules
属性是个 数组；这个数组中，存放了，所有第三方文件的 匹配和 处理规则；
module: { // 这个节点，用于配置 所有 第三方模块 加载器
rules: [ // 所有第三方模块的 匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 配置处理 .css 文件的第三方loader 规则
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理 .less 文件的第三方 loader 规则
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置处理 .scss 文件的 第三方 loader 规则
]
}
- 在当前文件目录main.js 导入css
import $ from 'jquery'
// 导入css
文件下的index.css 文件
import './css/index.css'
$(function () {
$('li:odd').css('backgroundColor', 'red');
$('li:even').css('backgroundColor', function () {
return '#' + 'D97634'
})
});
- 打包后会在页面生成内部样式
- loader 执行顺序
1. 发现这个 要处理的文件不是JS文件，然后就去 配置文件中，查找有没有对应的第三方 loader 规则
2. 如果能找webpack.config.js对应的module里面的规则， 就会调用 对应的
loader 处理 这种文件类型；
3. 在调用loader 的时候，是从后往前调用的；例如['style-loader', 'css-loader'] 先
执行css-loader,在执行style-loader
4. 当最后的一个 loader 调用完毕，会把 处理的结果，直接交给 webpack 进行 打包合并，最终输出到 bundle.js 中去
css – background中的url
- 安装
1.npm install url-loader file-loader --save-dev
- 配置
1.打开 webpack.config.js 这个配置文件，在 里面，新增一个 配置节点，叫做
module, 它是一个对象；在 这个 module 对象身上，有个 rules 属性，这个 rules
属性是个 数组；这个数组中，存放了，所有第三方文件的 匹配和 处理规则；
2.limit 给定的值，是图片的大小，单位是 byte
3.如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
4.如果不指定图片名字，图片名字会自动转换成hase，是为了防止重名
[name].[ext]，[name]的含义是保持图片原来名称，[ext]保持原来图片后缀
5.这里的[hash:8] 截取哈希值前八位为了防止重名
module: { // 配置所有第三方loader 模块的
rules: [
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }
]
}
- 具体案例就是在css 的background中使用了url
.box2{
width: 220px;
height: 120px;
background: url('../images2/使用了图片.jpg');
background-size: cover;
}
css – 处理字体图标
- 安装
1.npm install url-loader file-loader --save-dev
- 配置
1.打开 webpack.config.js 这个配置文件，在 里面，新增一个 配置节点，叫做
module, 它是一个对象；在 这个 module 对象身上，有个 rules 属性，这个 rules
属性是个 数组；这个数组中，存放了，所有第三方文件的 匹配和 处理规则；
2.配置文字的和图片的用的是一个loader 但是配置的时候建议分开配置
module: { // 配置所有第三方loader 模块的
rules: [
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader
]
}
- 通过npm 安装引入的css 文件
1.上面的字体以bootstrap 为例，当我们通过nmp 下载了bootstrap时候，
如果直接 import bootstrap from 'bootstrap' 引入的是js文件
2.但我们想引入css 文件要做的，首先所有的nmp 下载的包都在
node_modules文件中 ，因此bootstrap 的css 文件也其中，我们只需要去指定具体的css 目录即可
3.如果要通过路径的形式，去引入 node_modules 中相关的文件，可以直接
省略 路径前面的 node_modules 这一层目录，直接写 包的名称，然后后面
跟上具体的文件路径
4.不写 node_modules 这一层目录 ，默认 就会去 node_modules 中查找
- 在main.js 导入的写法
import 'bootstrap/dist/css/bootstrap.css'
[danger] ##### 把js 高级语法es6 转成低级语法
1. 在 webpack 中，默认只能处理 一部分 ES6 的新语法，一些更高级的ES6语法
或者 ES7 语法，webpack 是处理不了的；这时候，就需要 借助于第三方的
loader，来帮助webpack 处理这些高级的语法，当第三方loader 把 高级语法转为
低级的语法之后，会把结果交给 webpack 去打包到 bundle.js 中
2.通过 Babel ，可以帮我们将 高级的语法转换为 低级的语法
3.目前，我们安装的 babel-preset-env, 是比较新的ES语法， 之前， 我们安装的是 babel-preset-es2015, 现在，出了一个更新的 语法插件，叫做 babel-preset-env ，它包含了 所有的 和 es***相关的语法
- 安装
// 一下方法只支持npm install -D babel-loader@7 babel-core babel-preset-env
1.npm i babel-core babel-loader babel-plugin-transform-runtime -D
2.npm i babel-preset-env babel-preset-stage-0 -D
- webpack.config.js 配置
1. 注意： 在配置 babel 的 loader规则的时候，必须 把 node_modules 目录，通过 exclude 选项排除掉：原因有俩：
2. 如果 不排除 node_modules， 则Babel 会把 node_modules 中所有的 第三方 JS 文件，都打包编译，这样，会非常消耗CPU，同时，打包速度非常慢；
3. 哪怕，最终，Babel 把 所有 node_modules 中的JS转换完毕了，但是，项目也无法正常运行！
module: { // 配置所有第三方loader 模块的
rules: [
{ test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ },
]
}
- 在根目录创建.babelrc文件进行配置
1.在项目的 根目录中，新建一个 叫做 .babelrc 的Babel 配置文件，这个配置文件，属于JSON格式，所以，在写 .babelrc 配置的时候，必须符合JSON语法规范： 不能写注释，字符串必须用双引号
{
"presets": ["env", "stage-0"],
"plugins": ["transform-runtime"]
}
752
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
