1.上图,晒一下我的目录结构.
这个结构里面还有很多细节的没有完善,但是整体的结构就这样. 使用 npm init 初始化目录.
2.使用webpack打包多个页面
很多人都有一个认知误区,认为Vue+Webpack都是用来做单页应用(spa, 请注意单页应用不等于只有一个界面的应用.) webpack也可以用来打包多页应用.
首先我们了解一下webpack的基本的配置
{
entry: 入口文件,
output: {
path: 出口目录
filename: 打包后文件名
},
module: {
rules: 各种处理模块
},
plugins: [ 各种插件 ]
}
当我们想打包多页面时就意味着在入口文件我们要传入多个文件路径.
以两个页面为例子.
在出口我们就不能直接设置一个固定的名称,可以使用[name], 即原来文件的名称.
打包后的文件统一放到 build 文件夹下,这里是 js 文件, 我们放到 build 文件夹下 js 文件夹.
(注: __dirname 是nodejs一个全局变量, 表示在全局下的当前路径.)
这里处理完 js , 我们还需要处理 html 文件, 并将 js 以及 css 引用到页面.
下面我们使用一个插件 html-webpack-plugin 进行 html 的处理.
首先是安装
npm install -D html-webpack-plugin (这个插件webpack4.0已经改了, 我这里用的是webpack3.10.0)
在 webpack.config.js 中引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
插件要在 plugins 属性中配置
到这里我们就能打包并输出两个页面文件
可以看到打包后的 index.html 引入了打包后的 index.js 文件并且还添加了哈希值.
但是, 这只是两个页面,如果是10个页面,100个页面,那我们是不是要在 entry 与 plugins 中写10个100个相同的配置呢? 所以我们可以采用函数化处理.
我们这里用到 node 的 glob 包, glob.sync()方法能获得传入目录下的所有文件,并返回一个数组.
在 api.js 中 我们写一个函数 getView 用于处理 js 与 html 文件
定义一个常量 FILE_PATH 用于存放需要查找的文件路径, 便于后期维护修改.只需要改一处地方
将得到的入口文件 entrys 以及模板文件 templates 导出.
这里的 entrys 是
{
index: './src/pages/index/index.js',
login: './src/pages/login/login.js'
}
哇! 这跟我们上面写的 entry 一模一样, 这样哪怕后期添加更多的页面我们也不需要去改动 webpack.config.js 中的 entry 配置.
templates 是
{
index: './index.html',
login: './login.html'
}
我们在 webpack.config.js 中引入 api.js
直接赋值给 entry
我们要对 TEMPLATES 进行一些处理,我们不需要 " ./ "
3.配置Vue开发环境.
安装一些依赖包
npm install -D vue vue-loader vue-style-loader vue-html-style vue-compiler
(注: vue-loader 现在安装的话都15.0.3版本 ，会出现vue-loader was used without the corresponding plugin.。然后 我也不知道什么原因，我就把版本号改为14.0.3 了就ok了。)
因为我习惯使用 less 进行开发, 所以还需要安装一些依赖包
npm install -D less less-loader style-loader css-loader
(注: 使用时有先后顺序的, loader的运行顺序是从右往左. loaders: 'style-loader ! css-loader ! less-loader') 先用 less-loader 编译成 css, 再用 css-loader 使 css 文件能以 import ' ' 或者 require('') 方式引入, 最后是 style-loader 将 css 插件页面中
我不想把 css 文件一起打包进 js 中,我希望 css 文件能单独打包在一个文件夹里.于是我使用了 extract-text-webpack-plugin. 跟上面我们使用其他插件一样, 要先安装然后引入.
这里的 [name] 并不是 原来 css 文件名, 而是被哪个 js 文件引入那个 js 文件的名.因为我们在使用 html-webpack-plugin 插件时用了 hash, 所以不用担心 css 文件会重名.
记得最后要导出 config;
module.exports = config
今天先写到这, 下次再继续更新.,,还要配 devServer 以及 实时刷新等.
希望大家共同学习, 一起进步