文章目录
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"]
}