前言
看了很多童鞋关于用webpack手动搭建vue项目的文章，自己从中也学到了一些，在这里做个小的栗子，供以后学习拓展，有总结不周的地方，大家可以提一些建议，多多益善
一、Webpack
在搭建Vue项目前，我们需要先了解一下webpack是干啥的，大家可以去 webpack中文文档 进行系统型的学习，在下面的配置中也会说到这些关键的配置词语，由于咱们主要讲的是用Webpack来搭建Vue项目，所以在这里关于Webpack的一些详细介绍各位童鞋阔以下去补补课。
二、步入正题
1.初始化项目 npm init
初始化.jpg
使用 npm init 指令创建项目描述文件 package.json，命令行里面会以问答的形式来填一些项目的介绍信息，下面我们依次来看一下：
| 介绍信息 | 释意 |
|---|---|
| package name | 项目名称 |
| version | 版本号 |
| description | 描述信息 |
| entry point | 入口文件 |
| test command | 项目启动时脚本命令 |
| git repository | Git地址，可以把当前项目放到Git仓库里 |
| keywords | 关键字 |
| author | 作者的名称 |
| license | 项目要发行的时候需要的证书 |
现在我们打开package.json，就可以看到刚刚的项目介绍信息
2.创建项目需要的基础文件夹以及基础文件
- 手动创建
- 复习一下liunx命令
- mkdir [文件夹名称] 创建文件夹
- touch [文件名称] 创建文件
目前创建完的目录是酱的：
文件目录.jpg
| 名称 | 释意 |
|---|---|
| config | 项目配置文件夹 |
| webpack.config.js | webpack配置文件 |
| src | 项目源码文件夹 |
| assets | 静态资源（图片、样式）文件夹 |
| components | 路由文件夹 |
| App.vue | 根文件 |
| main.js | 项目入口文件 |
| index.html | 页面入口文件 |
| package.json | 依赖文件 |
3. 按照webpack以及一系列的依赖文件 npm install
{
"name": "vuedemo",
"version": "1.0.0",
"description": "webpack + vue demo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
},
"dependencies": {
"html-webpack-plugin": "^3.2.0",
"vue": "^2.6.10"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"cross-env": "^5.2.0",
"css-loader": "^3.0.0",
"style-loader": "^0.23.1",
"url-loader": "^2.0.0",
"vue": "^2.6.10",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.34.0",
"webpack-cli": "^3.3.4",
"webpack-dev-server": "^3.7.1"
},
"author": "xiaowu",
"license": "ISC"
}
我们首先来看一下package.json里面的devDependencies和dependencies的区别：
- devDependencies
开发应用时所依赖的工具包。通常是一些开发、测试、打包工具，例如 webpack。应用正常运行并不依赖于这些包，用户在使用 npm install 安装你的包时也不会安装这些依赖。 - dependencies：
应用能够正常运行所依赖的包，用户在使用 npm install 安装你的包时会自动安装这些依赖。
看一下开发环境下所依赖的工具包：
| 依赖名称 | 释意 |
|---|---|
| babel-core、babel-loader | 安装babel的转换工具包 |
| cross-env | 配置三种环境（开发、测试、生产）打包 |
| css-loader、style-loader | css依赖 将css解析成模块，将解析的内容插入到页面 |
| file-loader、url-loader | 解析图片 能够将图片转成base64代码直接写在js里面 |
| html-webpack-plugin | 以我们自己的html为模板将打包后的结果，自动引入到html中产出到dist目录下 |
| stylus、stylus-loader | css预处理器 |
| vue-loader | 处理.vue文件 |
| vue-template-compiler | 解析template模块 |
| webpack-dev-server | 内置一个服务 可以启动一个端口号，当代码更新时可以自动打包（内存中打包） |
4.配置 webpack.config.js
const path = require('path'); // 路径处理模块 nodeJs基本包
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin') // html解析插件
module.exports = {
entry: path.resolve(__dirname,"../src/main.js"), // 项目总入口js文件 __dirname表示当前文件的路径
// 输出文件
output: {
path: path.resolve(__dirname, 'dist'), // 所有的文件都输出到dist/目录下
filename: '[name].[hash].js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.styl/,
use: [
'style-loader',
'css-loader',
'stylus-loader'//这个loader依赖stylus这个包，所以装的时候还要安装这个stylus
]
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url-loader', // 能够将图片转成base64代码直接写在js里面,依赖file-loader，所以在安装的时候不仅要装url-loader还要装file-loader
options: {
name(file) {
if (process.env.NODE_ENV === 'development') {
return '[path][name].[ext]';
}
return '[hash].[ext]';
},
limit: 8192,
outputPath: "dist/images/"
}
}
]
},
plugins: [
new VueLoaderPlugin(), // 最新版的vue-loader需要配置插件
// 具体配置https://github.com/jantimon/html-webpack-plugin
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === "production" ? '../index.html' : "index.html", // 生成html文件的名字，默认为index.html
template: 'index.html', // 当webpack自动生成html文件的时候，会基于某个模板来进行
inject: "body", // 所有javascript资源将被放置在body元素的底部
chunks: ["main"] // 只添加main.js/main.css
})
],
// https://www.jianshu.com/p/62dc120d96d0
// 使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后
// 输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项，但是在生产阶段一定不要用这个选项；
devtool: '#eval-source-map', // 调试
// 模块resolve的规则
resolve: {
// 配置路径别名，比如import Vue from 'vue/dist/vue.common.js'--> import Vue from 'vue'
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true, // 不跳转
hot: true, // 热加载，不需要刷新页面就能加载出来
inline: true, // 实时刷新
stats: { colors: true } // 终端输出为彩色
}
}
// 是否是生产环境
if (process.env.NODE_ENV === 'production') {
// module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
5.App.vue
<template>
<div id="app">
{{msg}}
</div>
</template>
<script>
export default {
name:'app',
data(){
return {
msg:'HelloWorld'
}
}
}
</script>
<style>
</style>
6.main.js
import Vue from "vue";
import App from "./App.vue";
new Vue({
el: '#app',
components: {App},
template: '<App/>',
})
7.package.json中的script中加一个命令"dev"
"dev": "cross-env NODE_ENV=development webpack-dev-server --config ./config/webpack.config.js --open --hot"
8. 运行 npm run dev
运行.jpg
暂时只写了单页面，之后会拓展并且会总结在其中遇到的bug，中间有不足的地方大家阔以提粗来，蟹蟹～
网友评论