基础项目搭建
准备工作
# 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 =configVue+webpack从零搭建工程项目
原文地址：https://www.cnblogs.com/nirao/p/10206862.html