webpack一步步实现实时打包、打包vue、打包css\less\scss文件、babel用法(1)
文章目录
- 安装webpack
- 构建项目进行webpack打包
- 使用webpack的实时打包构建
- 打包css\less\scss
- 项目代码
安装webpack
什么是webpack?
webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；
学习官网：https://www.webpackjs.com/
打包方案
1.使用Gulp， 是基于 task 任务的；
2.使用Webpack， 是基于整个项目进行构建的；
借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。
webpack安装的两种方式
1.运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令
2.在项目根目录中运行npm i webpack --save-dev安装到项目依赖中
3.安装npm i webpack-cli -g
这里提示安装 webpack-cli// 是因为到了webpack4, webpack 已经将 webpack 命令行相关的内容都迁移到 webpack-cli，所以除了 webpack 外，我们还需要安装 webpack-cli
构建项目进行webpack打包
我们先看下小demo的目录结构
初步使用webpack打包构建列表隔行变色案例
1.创建项目基本的目录结构
2.运行npm init -y初始化项目，使用npm管理项目中的依赖包
3.使用npm i jquery --save安装jquery类库，会生成node_modules包
npm install moduleName # 安装模块到项目目录下
npm install -g moduleName # -g
的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置。
npm install -save moduleName # -save
的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。
npm install -save-dev moduleName # -save-dev
的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。
4.创建index.js并书写各行变色的代码逻辑：
import $ from 'jquery'
$(function () {
$('li:odd').css('backgroundColor', 'red')
$('li:even').css('backgroundColor', function () {
return '#' + 'D97634'
})
})
5.编写自动打包配置文件webpack.config.js
const path = require('path')
module.exports={
entry:path.join(__dirname,'./src/main.js'),
output:{
path:path.join(__dirname,'./dist'),
filename:'a.js'
}
}
6.编写前端代码index.html
Document
- 这是第1个li
- 这是第2个li
- 这是第3个li
- 这是第4个li
- 这是第5个li
- 这是第6个li
- 这是第7个li
- 这是第8个li
- 这是第9个li
- 这是第10个li
7.然后输出repack指令，去生成./dist/index.js编译后的文件
zhiliaodeMBP:webpack_study zhiliao$ webpack
Hash: 83e0feae3cae4dfed0fe
Version: webpack 4.20.2
Time: 288ms
Built at: 2018/10/16 下午2:28:52
Asset Size Chunks Chunk Names
index.js 305 KiB main [emitted] main
Entrypoint main = index.js
[./src/index.js] 186 bytes {main} [built]
+ 1 hidden module
zhiliaodeMBP:webpack_study zhiliao$
8.测试效果如下：
// 当我们在 控制台，直接输入 webpack 命令执行的时候，webpack 做了以下几步：
// 1. 首先，webpack 发现，我们并没有通过命令的形式，给它指定入口和出口
// 2. webpack 就会去 项目的 根目录中，查找一个叫做 webpack.config.js 的配置文件
// 3. 当找到配置文件后，webpack 会去解析执行这个 配置文件，当解析执行完配置文件后，就得到了 配置文件中，导出的配置对象
// 4. 当 webpack 拿到 配置对象后，就拿到了 配置对象中，指定的 入口 和 出口，然后进行打包构建；
使用webpack的实时打包构建
以上我们每次修改代码之后，需要webpack重新生成编译后的文件，那么我们能不能实现直接实时打包，当我们直接保存就可以自动打包编译，然后效果立现呢？是可以的，我们需要进行如下的操作：
1.使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包编译
2.运行npm i webpack-dev-server --save-dev安装到开发依赖，或者npm i webpack-dev-server -D
-S就是--save的简写
-D就是--save-dev
3.安装完成之后，在命令行直接运行webpack-dev-server来进行打包，发现报错,此时需要借助于package.json文件中的指令,在scripts节点下新增"dev": "webpack-dev-server"指令，发现可以进行实时打包，
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
}
4.此时我们执行npm run dev，发现报如下的错误信息：
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
ℹ ｢wdm｣: Compiled with warnings
因为在webpack4中需要我们进行mode配置操作,我们修改webpack.config.js文件
添加一行键值对mode: 'development'或者mode: 'production'，
const path = require('path')
module.exports={
entry:path.join(__dirname,'./src/index.js'),
output:{
path:path.join(__dirname,'./dist'),
filename:'index.js'
},
// mode: 'production',
mode: 'development',
}
然后在进行编译，就编译成功，如下是成功的日志输出，我只是贴出了一部分
Entrypoint main = index.js
[24] (webpack)/hot/emitter.js 77 bytes {0} [built]
[25] ./node_modules/events/events.js 8.13 KiB {0} [built]
[26] ./src/index.js 185 bytes {0} [built]
+ 12 hidden modules
ℹ ｢wdm｣: Compiled successfully.
5.接下来我们进行测试如下：
我们修改下index.js的文件内容，我们由之前的red修改为如下的yellow
$('li:odd').css('backgroundColor', 'yellow')
就会发现命令行会自动编译，然后编译成功！！！
我们刷新浏览器发现，并没有变化，奇怪？哪里搞错了？
其实我们在进行npm run dev时候，dist目录下并没有生成index.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中，放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快
这个时候访问webpack-dev-server启动的http://localhost:8080/网站，发现是一个文件夹的面板，需要点击到src目录下，才能打开我们的index首页，
此时引用不到bundle.js文件，需要修改index.html中script的src属性为:
因为浏览器输出http://localhost:8080/index.js会看到内存中的index.js文件
然后在重新npm run dev，然后在实时更新内容，浏览器就可以实时展现效果了
6.为了能在访问http://localhost:8080/的时候直接访问到index首页，可以使用--contentBase src指令来修改dev指令，指定启动的根目录：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 3100 --contentBase src --hot"
}
以上配置意思就是执行npm run dev,会自动打开浏览器，然后端口是3100，直接定位到src,而且使用热更新
其实我们还可以进行配置操作，以下是配置到内内容，为了区分哪些是需要添加到内容，我特定将其注释了，注释的部分就是在代码中进行的配置
const path = require('path')
//启用热更新
// const webpack = require('webpack')
module.exports={
entry:path.join(__dirname,'./src/index.js'),
output:{
path:path.join(__dirname,'./dist'),
filename:'index.js'
},
mode: 'production',
// devServer:{
// open:true,
// port:3100,
// contentBase:'src',
// hot:true
// },
// plugins:[
// new webpack.HotModuleReplacementPlugin()//new一个热更新
// ]
}
7.使用html-webpack-plugin插件配置启动页面
运行npm i html-webpack-plugin --save-dev安装到开发依赖
修改webpack.config.js配置文件如下：
添加如下：
var htmlWebpackPlugin = require('html-webpack-plugin');
plugins:[ // 添加plugins节点配置插件
new htmlWebpackPlugin({
template:path.resolve(__dirname, 'src/index.html'),//模板路径
filename:'index.html'//自动生成的HTML文件的名称
}),
],
然后测试，效果可以通过，我们来看下浏览器渲染的index.html页面
Document
- 这是第1个li
- 这是第2个li
- 这是第3个li
- 这是第4个li
- 这是第5个li
- 这是第6个li
- 这是第7个li
- 这是第8个li
- 这是第9个li
- 这是第10个li
我们看到多生成了一个标签
将index.html中script标签注释掉，因为html-webpack-plugin插件会自动把index.js注入到index.html页面中
所以说我们在webpack.config.js中可以将entry和output均去掉，具体代码看如下
打包css\less\scss
打包css
1.运行npm i style-loader css-loader --save-dev
2.修改webpack.config.js这个配置文件
打包less
- 需要
npm i less -D安装less,是less-loader 内部依赖
1.运行cnpm i less-loader less -D
2.修改webpack.config.js这个配置文件：
打包scss
1.需要npm i node-sass -D安装node-sass
2.运行cnpm i sass-loader node-sass --save-dev
3.在webpack.config.js中添加处理sass文件的loader模块：
在webpack.config.js中添加如下内容：
//这个节点用于配置所有的第三方模块加载器
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader']},
{test:/\.less$/,use:['style-loader','css-loader','less-loader']},
{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
]
}
use表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的
然后我们在css目录中，添加3个样式文件
index.css
li{
list-style: none;
}
index.less
ul{
padding: 0;
margin: 0;
}
index.scss
html,body{
margin: 0;
padding: 0;
li{
font-size: 12px;
line-height: 30px;
}
}
然后进行 npm run dev查看效果：
项目代码
其中css文件中的index.css、 index.less、 index.scss文件省略，上面已经写出
index.html
Document
- 这是第1个li
- 这是第2个li
- 这是第3个li
- 这是第4个li
- 这是第5个li
- 这是第6个li
- 这是第7个li
- 这是第8个li
- 这是第9个li
- 这是第10个li
index.js
import $ from 'jquery'
import './css/index.css'
import './css/index.less'
import './css/index.scss'
$(function () {
$('li:odd').css('backgroundColor', 'pink')
$('li:even').css('backgroundColor', function () {
return '#' + 'D97634'
})
})
webpack.config.js
const path = require('path')
//启用热更新
const webpack = require('webpack')
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
// entry:path.join(__dirname,'./src/index.js'),
// output:{
// path:path.join(__dirname,'./dist'),
// filename:'index.js'
// },
mode: 'production',
plugins:[ // 添加plugins节点配置插件
new htmlWebpackPlugin({
template:path.resolve(__dirname, 'src/index.html'),//模板路径
filename:'index.html'//自动生成的HTML文件的名称
}),
new webpack.HotModuleReplacementPlugin()//new一个热更新
],
devServer:{
open:true,
port:3100,
contentBase:'src',
hot:true
},
//这个节点用于配置所有的第三方模块加载器
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader']},
{test:/\.less$/,use:['style-loader','css-loader','less-loader']},
{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
]
}
}