请注明出处:http://blog.csdn.net/qq_23179075/article/details/79307198
1 初始化项目并用 vue-loader+webpack 配置项目
1.1 用 npm 初始化项目目录
npm init -y
目录下生成 package.json
可以设置下自己的信息
{
"name": "todolist",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
1.2 用 npm 安装 webpack, vue, vue-loader
cnpm i webpack vue vue-loader --save
安装完成后控制台出现下面两条警告:
因为 vue-loader
需要两个第三方依赖 : css-loader
, vue-template-compiler
,这里继续通过 npm
安装需要的依赖即可.
cnpm i css-loader vue-template-compiler --save
1.3 创建 webpack 的配置文件
在项目根目录下创建一个 webpack.config.js
的文件, 配置内容如下:
const path = require('path')
module.exports = {
entry: path.join(__dirname, 'src/index.js'), //入口文件 __dirname:目录所在的地址
output: {
filename: 'bundle.js', //输出文件名
path: path.join(__dirname, 'dist') //输出文件地址
}
}
1.4 创建项目的基础文件, 并通过 webpack 打包
在项目目录下创建一个 src 目录, 在 src 目录下创建一个 Vue 的基础组件 app.vue 和一个入口文件 index.js
app.vue 内容如下:
<template>
<div id="test">{{text}}</div>
</template>
<script>
export default {
data () {
return {
text:'abc'
}
}
};
</script>
<style>
#test{
color: red;
}
</style>
index.js 内容如下:
import Vue from 'vue'
import App from './app.vue'
const root = document.createElement('div')
document.body.appendChild(root)
new new Vue({
render:(h) =>(App)
}).$mount(root)
创建完成后, 就可以用 webpack 工具进行打包了, 在命令行执行如下命令:
webpack
但是当执行完这个命令会出现如下的错误:
可以看到上面的错误提示是 解析 app.vue 这个文件出错, 需要我们为这个文件声明一个 loader, 因为 webpack 这个打包工具只支持原生的 js 文件类型, 并且支持的语法只是 ES5 的语法, 所以我们需要在 webpack.config.js 中配置能解析 .vue 文件的 loader.
const path = require('path')
module.exports = {
entry: path.join(__dirname, 'src/index.js'), //入口文件 __dirname:目录所在的地址
output: {
filename: 'bundle.js', //输出文件名
path: path.join(__dirname, 'dist') //输出文件地址
},
module:{
rules:[
{
test: /.vue$/,
loader: 'vue-loader'
}
]
}
}
为了方便命令的运行, 我们统一使用 npm 脚本来运行项目中的一些常用的命令, 在 package.json 中做如下配置:
{
...其它属性...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" // 使用 webpack 工具打包-- .json文件是不支持注释的,运行时去掉该注释
},
...其它属性...
}
这个时候我们只要在控制台输入如下命令就可一运行了:
npm run build
执行完成, 不出错的情况下 项目根目录下回多出一个这个样的文件目录结构 dist/bundle.js .
2.webpack 配置项目加载各种静态资源及 css 预处理器
2.1 在 webpack.config.js 中配置加载 css , 图片 等的 loader
module:{
rules:[
{
//加载 .vue 文件
test:/\.vue$/,
loader:'vue-loader'
},
{
//加载 .css 文件
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
},
{
//加载图片文件
test:/\.(gif|png|jpg|jpeg|svg)$/,
use:[
{
loader:'url-loader',
options:{//loader 的参数配置
limit:1024, // 图片大小 1024
name:'Ican-[name].[ext]'//新文件名字 Ican-: 文件名前缀, [name]:原文件名,[ext]:扩展名
}
}
]
}
]
}
开始的时候我们已经安装了几个 loader 了, 下面把上面配置文件中没有的安装的 loader 通过 npm 安装下
cnpm i style-loader url-loader file-loader --save
因为 url-loader 是依赖于 file-loader 的, 所以这里一并也将 file-loader 安装了.
2.2 创建 assets 静态资源目录
在 src 目录下创建 assets/images 和 assets/styles 两个目录,并且放一些测试的图片 和 css 文件
test.css 中的内容:
body {
color: red;
background-image: url('../images/education.svg')
}
然后在 index.js 文件中引入这些资源
import './assets/styles/test.css'
import './assets/images/bg.jpg'
运行一下打包命令后,可以在 dist 目录下看到我们的图片文件说明配置正确
2.3 添加 css 预处理器 stylus-loader [ 可忽略 ]
在 webpack.config.js 中添加以下代码
...其它loader配置...
{
//css 预处理器
test:/\.styl/,
use:[
'style-loader',
'css-loader',
'stylus-loader'
]
},
...其它loader配置...
通过 npm 安装 stylus-loader
cnpm i stylus-loader stylus --save
在 index.js 文件中引用 .styl 文件的方式跟引用 .css 文件的方式相同.
3.webpack-dev-server的配置和使用
3.1 通过 npm 安装 webpack-dev-server 、 cross-env 和 html-webpack-plugin
cross-env 主要用来给 node.js的脚本文件设置环境变量的。
html-webpack-plugin 这个插件可以自动创建一个 index.html 的入口文件,并且自动引入项目中打包后的 js文件。
cnpm i webpack-dev-server cross-env html-webpack-plugin --save
安装完成后再 package.json 添加脚本:修改后完整的package.json文件
{
"name": "todolist",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "cross-env NODE_ENV=product webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=dev webpack-dev-server --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"cross-env": "^5.1.3",
"css-loader": "^0.28.9",
"file-loader": "^1.1.6",
"html-webpack-plugin": "^2.30.1",
"style-loader": "^0.19.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"url-loader": "^0.6.2",
"vue": "^2.5.13",
"vue-loader": "^13.7.0",
"vue-template-compiler": "^2.5.13",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.1"
}
}
上面的 cross-env NODE_ENV=XXX
就是指定的一个变量名: NODE_ENV
值为: XXX
,变量会存在一个 process.env
的js 对象中。
当然还需要修改一下 webpack 的配置,来专门适应我们 webpack-dev-server 的开发模式,同时需要根据上面脚本文件设置的变量进行开发环境的判断。
修改后完整的 webpack.config.js 配置文件
const path = require('path')
const HTMLPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
//判断当前环境是否是开发环境 dev
const isDev = process.env.NODE_ENV === "dev"
const config = {
target: 'web',//编译目标设置为web平台
entry: path.join(__dirname, 'src/index.js'), //入口文件 __dirname:目录所在的地址
output: {
filename: 'bundle.js', //输出文件名
path: path.join(__dirname, 'dist') //输出文件地址
},
module: {
rules: [
{
//加载 .vue 文件
test: /\.vue$/,
loader: 'vue-loader'
},
{
//加载 .css 文件
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
//css 预处理器
test: /\.styl/,
use: [
'style-loader',
'css-loader',
'stylus-loader'
]
},
{
//加载图片文件
test: /\.(gif|png|jpg|jpeg|svg)$/,
use: [
{
loader: 'url-loader',
options: {//loader 的参数配置
limit: 1024, // 图片大小 1024
name: 'Ican-[name].[ext]'//新文件名字 Ican-: 文件名前缀, [name]:原文件名,[ext]:扩展名
}
}
]
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: isDev ? '"dev"' : '"product"'
}
}),
new HTMLPlugin()
]
}
if (isDev) {
config.devtool = '#cheap-module-eval-map'
config.devServer = {
port: '8000', //服务器端口
host: '0.0.0.0',
overlay: {
errors: true,//将错误显示在网页上
},
hot: true, //页面重新加载只重新渲染被修改过的组件
// open: true //运行devServer时自动打开浏览器
}
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin
)
}
module.exports = config
配置完成后就可以运行了:
npm run dev