从0开始搭建vue+webpack脚手架（一）

最新推荐文章于 2021-06-26 18:09:41 发布

weixin_30875157

最新推荐文章于 2021-06-26 18:09:41 发布

阅读量133

点赞数

文章标签： javascript webpack json ViewUI

原文链接：http://www.cnblogs.com/hughes5135/p/9327004.html

版权

　　基于多数情况下都是使用vue-cli初始化项目，却始终未去了解其原理。从零开始搭建，可以让自己更深层次的理解框架。

首先从最基本的npm 开始，至于安装npm 和 node就不用再赘述了，那是前端自动化开发最基本的能力。

一、初始化

1 新建项目目录，生成package.json并创建项目基本信息。

1 $ npm init --yes

2. 安装基本项目依赖模块

1 $ npm install -S vue

1 $ npm install -D webpack webpack-cli webpack-dev-server
2 $ npm install -D vue-loader

　　上述依赖的功能需要注意的是

　　（1）webpack@4.x以上需要安装webpack-cli ，因为webpack的cli命令已被独立分离到webpack-cli插件中

　　（2）安装vue-loader时会提示依赖于 css-loader和 vue-template-compiler (如下图), 只需在安装这两个依赖即可

3. 创建vue组件 src/App.vue, 入口文件src/index.js

 # App.vue

 1 <template>
 2   <div id='app'>{{msg}}</div>
 3 </template>
 4 
 5 <script>
 6   export default {
 7     name: 'App',
 8     data() {
 9       return {
10         msg: 'Hello world'
11       }
12     }
13   }
14 </script>
15 
16 <style scoped>
17 
18 </style>

1 import Vue from 'vue'
2 import App from './App.vue'
3 
4 const root = document.createElement('div')
5 document.body.appendChild(root)
6 
7 new Vue({
8   render: (h) => h(App)
9 }).$mount(root)

4. 根目录下创建webpack.config.js

 1 var path = require('path')
 2 
 3 module.exports = {
 4   entry: path.join(__dirname, 'src/index.js'),
 5   output: {
 6     path: path.join(__dirname, 'dist'),
 7     filename: "scripts/bundle.js"
 8   },
 9   module: {
10     rules: [
11       {
12         test: /\.vue$/,
13         use: [
14           {
15             loader: "vue-loader"
16           }
17         ]
18       }
19     ]
20   }
21 }

5. 添加 package.json文件中scripts 运行打包的脚本

1 "build": "webpack --mode=production --progress --colors"

　　注意：该处需要设定--mode，否则会报警告 production表示生产环境(打包代码自动压缩)， development表示开发环境

6. 打包项目, 报错如下。

1 $ npm run build

注意点：在vue-loader@15.x之后, 必须使用VueLoaderPlugin插件，在webpack.config.js中添加两行代码：

 1 var path = require('path')
 2 var VueLoaderPlugin = require('vue-loader/lib/plugin')
 3 
 4 module.exports = {
 5   entry: path.join(__dirname, 'src/index.js'),
 6   output: {
 7     path: path.join(__dirname, 'dist'),
 8     filename: "scripts/bundle.js"
 9   },
10   module: {
11     rules: [
12       {
13         test: /\.vue$/,
14         use: [
15           {
16             loader: "vue-loader"
17           }
18         ]
19       }
20     ]
21   },
22   plugins: [
23     new VueLoaderPlugin()
24   ]
25 }

再次打包，即可在根目录下生成dist目录 , 包含script/bundle.js文件

7. 接下来安装两个常用依赖

1 $ npm i -D clean-webpack-plugin  # 在打包时删除指定为文件或目录
2 $ npm i -D html-webpack-plugin   # 生成html入口文件

在webpack.config.js中配置, 同时在src目录下创建index.html

 1 var path = require('path')
 2 var VueLoaderPlugin = require('vue-loader/lib/plugin')
 3 var htmlWebpackPlugin = require('html-webpack-plugin')
 4 var cleanWebpackPlugin = require('clean-webpack-plugin')
 5 module.exports = {
 6   entry: path.join(__dirname, 'src/index.js'),
 7   output: {
 8     path: path.join(__dirname, 'dist'),
 9     filename: "scripts/bundle.js"
10   },
11   module: {
12     rules: [
13       {
14         test: /\.vue$/,
15         use: [
16           {
17             loader: "vue-loader"
18           }
19         ]
20       }
21     ]
22   },
23   plugins: [
24     new VueLoaderPlugin(),
25     new cleanWebpackPlugin(['dist']),
26     new htmlWebpackPlugin({
27       template: path.join(__dirname, 'src/index.html')
28     })
29   ]
30 }

src/index.html

1 <body>
2     <div id="root"></div>
3 </body>

更改index.js入口文件

1 import Vue from 'vue'
2 import App from './App.vue'
3 
4 new Vue({
5   render: (h) => h(App)
6 }).$mount('#root')   // 不再需要创建根节点，直接将App渲染到index.html中的#root节点

至此：项目初始化已经完成，运行 $ npm run build 已经可以正常打包

二、配置静态文件及CSS预处理器

　　1. 安装相关loader

1 $ npm i -D style-loader
2 $ npm i -D stylus stylus-loader
3 $ npm i -D url-loader
4 $ npm i -D file-loader

　　2 配置webpack.config.js的rules，添加以下代码：

 1       {
 2         test: /\.css$/,
 3         use: ['style-loader', 'css-loader']
 4       },
 5       {
 6         test: /\.styl(us)$/,
 7         use: ['style-loader', 'css-loader', 'stylus-loader']
 8       },
 9       {
10         test: /\.(jpg|jpeg|gif|png|svg)$/,
11         use: [
12           {
13             loader: "url-loader",
14             options: {
15               // 单位是b 500kb = 512000b
16               limit: 512000,
17               name: '[name]-[hash:8].[ext]'
18             }
19           }
20         ]
21       }

需要注意的是，

　　　　　　（1）loader的编译是从右到左的，所以在编译css文件时应该是先css-loader再到style-loader

　　　　　　（2）stylus-loader是css的预处理器，当然也可以使用less或者scss

　　　　　　（3）url-loader编译时会将小于 512000b（即500kb）的图片转换成base64, 当然limit的大小可以根据实际情况自己设定。

　　　　　　（4）如果没有安装file-loader则会在打包运行时报错找不到file-loader, 按提示安装即可

　　　　　　（5）stylus的test中必须是 /\.styl(us)?&/，表示匹配的是.styl或者.stylus文件, 即可使用外部.styl文件, 也可以.vue组件内使用stylus语法，如只写/\.styl$/, 在.vue组件中使用<style lang='stylus'></style>中会出现下图二的错误。表示无法检测到stylus-loader

此时可以在index.js中引入assets下的的index.css和图片文件

## src/index.js
1 import Vue from 'vue'
2 import App from './App.vue'
3 
4 import './assets/images/01.jpg'
5 import './assets/styles/index.css'
6 new Vue({
7   render: (h) => h(App)
8 }).$mount('#root')

## src/assets/styles/index.css
1 body {
2     color: salmon;
3     background-image: url('../images/01.jpg');
4 }

## src/App.vue
1 <template>
2   <div>
3     {{msg}}
4     <img src="./assets/images/02.jpg" alt="">
5   </div>
6 </template>

打包发现报警告如下：

以上警告表示, 建议每个输出的文件的大小不要超过 244k。但开发环境因为包含了 sourcemap 并且代码未压缩所以一般都会超过这个大小，所以我们可以在开发环境把这个 warning 关闭。在生产环境建议打开warning或error，有助于警告文件过大影响性能。

如要关闭警告可在webpack.config.js添加配置项：两个属性配置一个即可。

1 performance: {
2   hints: false, // 直接关闭警告
3   maxAssetSize: 50000  // 增加限制的大小
4 }

至此，$ npm run build打包成功。可打开dist下的index.html，图片和css文件正常加载。如果有小于500kb的图片，将会转为base64打包到bundle.js中，而大于500kb的图片正常输出到目录下。

接下来配置webpack-dev-server

转载于:https://www.cnblogs.com/hughes5135/p/9327004.html

weixin_30875157

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从0开始搭建vue+webpack脚手架（一）

　　基于多数情况下都是使用vue-cli初始化项目，却始终未去了解其原理。从零开始搭建，可以让自己更深层次的理解框架。首先从最基本的npm开始，至于安装npm和node就不用再赘述了，那是前端自动化开发最基本的能力。一、初始化1 新建项目目录，生成package.json并创建项目基本信息。1 $ npm init --yes2.安装基本项目依赖模块...
复制链接

扫一扫