用Webpack+Vue来Hello一个World
1 | webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的 bundle - 通常只有一个,由浏览器加载。 |
项目目录结构
- LreanWebpack
- src
- component
- images //存放图片
- public //公共组件
- style.css
- app.vue
- component
- config //webpack配置文件
- webpack.config.base.js
- webpack.config.dev.js
- node_modules //npm下载的模块
- entry.js //入口
- index.html //主页
- package.json //包管理
- package-lock.json
- src
Webpack的安装
npm install 包名 –save
npm install 包名 –save-dev
两者区别:
–save-dev:自动将模块和版本号添加至devDependencies,devDependencies为项目开发中所使用的环境
–save,自动将模块和版本号添加至dependencies,dependencies项目正常运行所需环境。
扩展:npm install –production安装devDependencies中的模块
npm install 安装devDependencies、dependencies中的模块
编写Webpack配置文件1
2
3
4
5
6
7module.exports = {
entry:'入口文件',
output:{
filename: [输出文件名.js],
path: [输出至目录],
},
}
以上代码是使用Webpack最基础的配置,上面写明了程序的入口文件,以及打包后的文件名及打包至哪个目录。
开始打包你的js文件
假设你的已经写好了所需的js代码,接下来需要将文件打包。
则可以使用
webpack –config [配置文件路径] [输出目录]。
每次都需要输出一串命令来打包文件,无疑十分麻烦。幸好npm允许在package.json里面自定义脚本命令,打开package.json文件。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18{
"name": "LreanWebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
……
},
"dependencies": {
……
},
"scripts": {
"build": "webpack --config ./config/webpack.config.base.js"
}
}
即可使用npm build – 参数 等同于 webpack –config ./config/webpack.config.base.js” 参数
该操作适用场景很广,后续为项目添加dev-server时也可使用scripts来简化开发流程。
怎么使用打包后的文件
安装好webpack、编写好js文件、执行了打包命令。该如何使用打包好的文件?1
2
3
4
5
6
7
8
9
10
11<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lrean webpack</title>
</head>
<body>
<div id="app"></div>
<script src="[输出目录]/[输出文件名].js"></script>
</body>
</html>
使用script标签引用在webpack配置文件中编写好的 [输出目录]以及[输出文件名].js,即可使用打包后的代码。
难道只能打包JS文件?
webpack将图片、css文件、js、html等文件都作为资源处理。处理不同文件的时候,webpack使用不同的loader对文件进行。
在正常的项目中肯定会使用到js、css、图片等资源,我们这次的练习还使用了vue,以及ES6。那么webpack如何处理这些文件?
webpack在处理相关文件的时候,需要先通过npm安装对应文件的loader,如css-loader、url-loader、vue-loader使用ES6则需要安装babel-loader与babel-core。
如何安装模块在webpack的安装中已经提过了,这里不在赘述。重要的是如何配置这些loader,打开我们之前编写的webpack.config.js文件。可以看到其中只有entry和ouput,配置loader则需要新增加一个module。1
2
3
4
5
6
7
8
9
10
11
12
13
14module.exports = {
entry:'入口文件',
output:{
filename: [输出文件名.js],
path: [输出至目录],
},
module:[{
test:/[正则]/, //用于匹配文件
loader:"[loader]" //文件使用的loader
},{
test:/\.css$/, //用于匹配文件
loader:"style-loader!css-loader" //文件使用的loader
}] //补充,loader!loader的写法意思是从右往左解析,css-loader会遍历css文件
} //找到所有的url(...)并且处理。style-loader会把所有的样式插入到你页面的一个style
再在入口文件或者需要使用的场景中引入资源文件即可使用。
- LreanWebpack
- src
- component
- images //存放图片
- public //公共组件
- style.css
- component
- src
- app.vue
- config //webpack配置文件
- webpack.config.base.js
- webpack.config.dev.js
- node_modules //npm下载的模块
- entry.js //入口
- index.html //主页
- package.json //包管理
- package-lock.json
以项目中的style.css文件为例。开发者只需要在入口文件entry.js中
require(“./src/component/public/style.css”);
即可使用。
- config //webpack配置文件