用Webpack+Vue来Hello一个World

用Webpack+Vue来Hello一个World

1
webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的 bundle - 通常只有一个,由浏览器加载。

项目目录结构

  • LreanWebpack
    • src
      • component
        • images //存放图片
        • public //公共组件
          • style.css
      • app.vue
    • config //webpack配置文件
      • webpack.config.base.js
      • webpack.config.dev.js
    • node_modules //npm下载的模块
    • entry.js //入口
    • index.html //主页
    • package.json //包管理
    • package-lock.json

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
7
module.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
14
module.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
  • 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”);
      即可使用。
文章作者: Ryan
文章链接: https://lrybackinblack.github.io/blog/2017/06/30/用Webpack+Vue来Hello一个World/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Ryan