Vue+webpack从零搭建工程项目

基础项目搭建

准备工作

# vscode 打开命令行ctrl + `(esc下面的键)# 在目录下面,初始化一个 npm项目npm init# 安装库npm i webpack vue vue-loader# 根据提示安装其他的库npm i css-loadernpm i vue-template-compiler

项目目录介绍

dist //将打包的资源输出目录node_modules // 安装的库目录src // 源码目录 app.vue // vue初始组件 index.js //入口文件package.json //项目配置信息文件,在用 npm init命令后生成webpack-config.js //webpack打包配置文件

app.vue

// html代码<template> <div class="title"> {{text}}</div></template>// js代码<script>export default { data(){ return{ text :"hello world" } }}</script>// css代码<style>.title{ color: red;}</style>

index.js

// 将组件挂载到vue当中import Vue from ‘vue‘import App from ‘./app.vue‘// 将 vue组件挂载到一个 root节点中const root = document.createElement(‘div‘)document.body.appendChild(root)new Vue({ render:(h)=>h(App)}).$mount(root)

webpack.config.js 打包配置

// webpack打包资源的配置 图片,js,html等// node.js基础包const path = require(‘path‘)const VueLoaderPlugin = require(‘vue-loader/lib/plugin‘);module.exports={ //程序入口文件,将当前的目录与后面的地址拼接 entry:path.join(__dirname,‘src/index.js‘), //输出路径,webpack将 vue等信息打包为一个可以在浏览器运行的js文件 output:{ filename:‘bundle.js‘, path:path.joinnpm i style-loader url-loader file-loader(__dirname,‘dist‘) }, plugins: [ // make sure to include the plugin for the magic new VueLoaderPlugin()], // 指定用什么处理 vue文件, webpack不能处理 vue文件 module:{ rules:[ { test:/.vue$/, loader:‘vue-loader‘ } ]}}

package.json

{ "name": "todolist", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build":"webpack --config webpack.config.js" }, "author": "", "license": "ISC", "dependencies": { "css-loader": "^2.1.0", "vue": "^2.5.21", "vue-loader": "^15.4.2", "webpack": "^4.28.2" }} 

tips: 需要在此处配置,使用项目中的webpack ,在命令行中执行用的是全局的 webpack "build":"webpack --config webapck.config.js"

编译

npm run build# 编译时可能提示需要安装库安装即可# npm install -D webpack-cli

编译问题

You may need an appropriate loader to handle this file type.?webpack只能处理js es5的文件,对 vue类型的文件,不能处理,我们需要手动指定处理规则

查看 bunde.js代码,在这个其实有 vue代码, webpack 做的就是把 静态资源打包成 js文件,便于浏览器处理

webpack静态资源的处理

安装库

 npm i style-loader url-loader file-loader npm i stylus stylus-loader

配置信息

// webpack打包资源的配置 图片,js,html等// node.js基础包const path = require(‘path‘)const VueLoaderPlugin = require(‘vue-loader/lib/plugin‘);module.exports={ //程序入口文件,将当前的目录与后面的地址拼接 entry:path.join(__dirname,‘src/index.js‘), //输出路径,webpack将 vue等信息打包为一个可以在浏览器运行的js文件 output:{ filename:‘bundle.js‘, path:path.join(__dirname,‘dist‘) }, plugins: [ // make sure to include the plugin for the magic new VueLoaderPlugin() ], module:{ rules:[ { // 指定vue-loader处理 vue文件, 处理 vue文件 test:/\.vue$/, loader:‘vue-loader‘ }, { //处理 css test:/\.css$/, // 使用css-loader读取内容,用 style-loader处理css写入到html代码中去 use:[ ‘style-loader‘, ‘css-loader‘ ] }, { // css 预处理文件 test:/\.styl/, use:[ ‘style-loader‘, ‘css-loader‘, ‘stylus-loader‘ ] }, { // 图片处理的 loader test:/\.(gif|jpg|jpeg|png|svg)$/, use:[ { // 使用 url-loader(依赖于file-loader)处理 图片资源,options是要给url-loader传递的参数 loader:‘url-loader‘, options:{ // 如果文件的大小小于1024kb,将将其转换为base64代码,存入html中 limit:1024, // 输出图片原先的名字 name:‘[name]-rao.[ext]‘ } } ] } ] }}

那么配置之后,就可以在js代码中 import 非js内容. index.js文件

// 引入非js.代码import Vue from ‘vue‘import App from ‘./app.vue‘import ‘./assets/styles/todo.css‘import ‘./assets/images/todo.png‘import ‘./assets/styles/todo-stylus.styl‘// 将 vue组件挂载到一个 root节点中const root = document.createElement(‘div‘)document.body.appendChild(root)new Vue({ render:(h)=>h(App)}).$mount(root)

webpack-dev-server的配置和使用

安装库

// 开发服务器npm i webpack-dev-server// 环境的切换 适应不同的平台npm i cross-env// html插件npm i html-webpack-plugin

在 package.json配置 dev-server

 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "cross-env NODE_ENV=production webpack --config webpack.config.js", "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js" }, 

webpack.cofig.js配置

// webpack打包资源的配置 图片,js,html等// node.js基础包const path = require(‘path‘)const VueLoaderPlugin = require(‘vue-loader/lib/plugin‘);const HTMLPlugin = require(‘html-webpack-plugin‘)const webpack = require(‘webpack‘)// 设置的环境变量存储在 process.env中const isDev = process.env.NODE_ENV===‘development‘const config ={ // 指定webpack的编译目标是web平台 target:‘web‘, //程序入口文件,将当前的目录与后面的地址拼接 entry:path.join(__dirname,‘src/index.js‘), //输出路径,webpack将 vue等信息打包为一个可以在浏览器运行的js文件 output:{ filename:‘bundle.js‘, path:path.join(__dirname,‘dist‘) }, plugins: [ // make sure to include the plugin for the magic new VueLoaderPlugin(), new HTMLPlugin(), // 定义一个环境变量 在这里定义了,在js代码中可以直接使用 new webpack.DefinePlugin({ ‘process.env‘:{ NODE_ENV:isDev ?‘"development"‘:‘"production"‘ } }) ], module:{ rules:[ { // 指定vue-loader处理 vue文件, 处理 vue文件 test:/\.vue$/, loader:‘vue-loader‘ }, { //处理 css test:/\.css$/, // 使用css-loader读取内容,用 style-loader处理css写入到html代码中去 use:[ ‘style-loader‘, ‘css-loader‘ ] }, { // css 预处理文件 test:/\.styl/, use:[ ‘style-loader‘, ‘css-loader‘, ‘stylus-loader‘ ] }, { // 图片处理的 loader test:/\.(gif|jpg|jpeg|png|svg)$/, use:[ { // 使用 url-loader(依赖于file-loader)处理 图片资源,options是要给url-loader传递的参数 loader:‘url-loader‘, options:{ // 如果文件的大小小于1024kb,将将其转换为base64代码,存入html中 limit:1024, // 输出图片原先的名字 name:‘[name]-rao.[ext]‘ } } ] } ] }}// 环境切换的判断if (isDev){ // webpack打包后的js是转移的(如es6转程es5),在出错后不好定位,需要把转换后的js代码映射,这样我门 // 查看错误的时候,还是我们编写代码样式,便于定位 config.devtool ="#cheap-module-eval-source-map" // 开发环境配置 config.devServer= { port:‘8001‘, // 设置成 0.0.0.0可以通过 localhost,127.0.0.1,本机ip进行访问 host:‘0.0.0.0‘, //如果有错直接显示在网页上面 overlay:{ errors:true }, // // 将server不理解的地址,映射首页 // historyFallback:{ // }, //在启动的时候自动打开浏览器 open:true, // 只渲染当前组件的效果,不会整个项目重新渲染 hot:true } config.plugins.push( // 热加载需要的插件 new webpack.HotModuleReplacementPlugin(), // 过滤一些不需要的信息 new webpack.NoEmitOnErrorsPlugin() )}module.exports =config

相关文章