webpack入门教程
全局安装(如果之前没安装的话,就全局安装一下,之前安装过了的话,就可以直接跳过这一步)
cnpm install webpack -g //全局安装
cnpm install webpack -s // 局部安装
注意:如果使用的是4.0+的版本,还需要安装webpack-cli
cnpm i webpack-cli -s
初始化
cnpm init
// 或则是:和上面的区别是,加-y是快捷安装,不需要你输入文件说明等
cnpm init -y
初始化之后,就会发现文件夹里面多了一个package.json文件,
注意:下面的注释是我为了让大家知道该字段代表的时候什么意思才加的,在json文件中添加注释是会报错的
{
"name": "vue-cli", // 文件名
"version": "1.0.0", // 项目版本
"description": "", // 描述
"main": "index.js", // 加载的入口文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1" // 指定脚本命令的缩写
},
"author": "Cynthia", // 作者
"license": "ISC"
}
创建一个bundle.js
首先呢,我们需要先搭好文件结构
webpack-demo
|- package.json
+ |- /dist
+ |- index.html
|+ /src
|+ index.js
就是新建两个文件夹src和dist文件夹,在src文件夹里面添加index.js,在dist文件夹里面添加index.html
index.js
function sayHello (){
return 'hello world'
}
console.log(sayHello())
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>首页</title>
</head>
<body>
<!--引入main.js,等下打包会把index.js默认打包为main.js-->
<script src="main.js"></script>
</body>
</html>
然后在命令窗口运行
创建配置文件
在webpack-demo中创建一个文件名webpack.config.js的js文件,然后输入下面的代码
const path = require("path");// 导入path模块
module.exports = {
entry: "./src/index.js", // 入口文件
output: {
filename: "bundle.js", // 打包后的文件
path: path.resolve(__dirname, "dist") // 打包后文件所放的文件夹路径
},
};
然后运行
npx webpack --config webpack.config.js
此时,你就会发现在dist文件里面会多了一个bundle.js
npm脚本
上面的打包语句是webpack-cli的打包语句,考虑到用起来不是特别的方便,我们自己可以在package.json里面
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack" // 加上这一句,打包就能简化
},
直接输入cnpm run build
添加资源管理
加载css样式
需要添加css样式的话,就需要添加css-loader和style-loader
cnpm i -s style-loader css-loader
添加完之后,在webpack.config.js文件中添加配置资源管理
module: {
rules: [
// 配置css
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
}
-
配置完之后,文件一个static文件夹,然后在里面添加添加/css/style.css表,并且写入一些基本样式
-
然后在index.js文件中导入css样式
import './../static/css/style.css'
加载less文件
安装less的loader
cnpm install --save-dev less less-loader
在webpack.config.js中配置
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
加载图片
安装file-loader
cnpm install --save-dev file-loader
在webpack.config.js中的rule里面添加配置:这里涉及的格式有png,svg,jpg,gif
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"]
}
加载字体
加载字体的话,需要url-loader
cnpm install --save-dev url-loader
在webpack.config.js中配置:
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ["file-loader"]
}
加载数据
在webpack中,因为node.js中json是内置的,所以json不需要配置,但是像CSV、TSV 和 XML 这些的话,就需要加载包来设置处理
cnpm install --save-dev csv-loader xml-loader
在webpack.config.js中配置
{
test: /\.(csv|tsv)$/,
use: ["csv-loader"]
},
{
test: /\.xml$/,
use: ["xml-loader"]
}
如何测试:
在index.js的同级目录里面添加data.xml
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Mary</to>
<from>John</from>
<heading>Reminder</heading>
<body>Call Cindy on Tuesday</body>
</note>
在index.js中引入
import data from './data.xml'
console.log(data)
设定html
cnpm install --save-dev html-webpack-plugin
在webpack.config.js中
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 和output同级添加下面这一段
plugins: [
new HtmlWebpackPlugin({
title: "Output Management"
})
]
清理dist文件夹
因为打包太多次文件,导致dist文件里面相当的混乱,webpack打包的时候,webpack 会生成文件，然后将这些文件放置在 /dist 文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。
通常，在每次构建前清理 /dist 文件夹，是比较推荐的做法，因此只会生成用到的文件。让我们完成这个需求。
clean-webpack-plugin 是一个比较普及的管理插件，让我们安装和配置下。
cnpm install clean-webpack-plugin --save-dev
然后在webpack.config.js中
const CleanWebpackPlugin = require("clean-webpack-plugin");
// 在plugins里面添加
plugins: [
new HtmlWebpackPlugin({
title: "Output Management"
}),
+ new CleanWebpackPlugin(["dist"])
]
使用webpack-dev-server
webpack-dev-server为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)
安装webpack-dev-server
cnpm install --save-dev webpack-dev-server
在webpack.config.js中配置:默认端口是8080,contentBase设置可访问的文件夹
devServer: {
contentBase: "./dist" // 默认localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。
},
在package.json文件里面添加star的命令,这样只要输入运行cnpm run start 就能自动打开浏览器,而实现自动打开浏览器的配置是--open
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
+ "start": "webpack-dev-server --open"
}
或则你可以设置为dev命令也行,我的习惯是dev命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --open",
+ "dev": "webpack-dev-server --open"
}
如果你希望打开的端口不是8080，而是自己定义的话，你可以添加在dev或则start里面添加--port 端口号
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --open",
+ "dev": "webpack-dev-server --port 3000 --open" // 我这里设置打开的端口号是3000
}
如果你希望打开服务器之后，在页面不关闭的情况下，你每次修改都能自动刷新（俗称热加载），那么你就在dev或则start里面添加--hot配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --open",
+ "dev": "webpack-dev-server --port 3000 --hot --open" // 我这里设置打开的端口号是3000
}
观察者模式
如果其中一个文件被更新，代码将被重新编译，所以你不必手动运行整个构建。
在package.json文件中
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
+ "watch": "webpack --watch",
"start": "webpack-dev-server --open",
"dev": "webpack-dev-server --hot --port 3000 --open"
},
然后我们可以在index.js中引入的js文件里面修改,例如我给print.js添加了一句话
export default function printMe() {
console.log("I get called from print.js!");
+ console.log("嘟嘟是个傻逼狗子");
}
然后我就运行cnpm run dev,不需要再重新构建(就是输入cnpm run build),你会发现,你添加的东西会显示在控制台
