# 新建一个空的webpack项目
mkdir webpack-vue-cli && cd webpack-vue-cli npm init -y touch webpack.config.js
@CodePoet: 代码已经复制到剪贴板
# 创建一些基础的目录结构:
mkdir src && cd src touch main.js && touch App.vue mkdir assets && mkdir components && mkdir styles cd ../ mkdir public && cd public touch index.html
@CodePoet: 代码已经复制到剪贴板
# 安装一些基本的依赖
# 1. 保证webpack的基本功能
cnpm i --save-dev webpack webpack-cli
@CodePoet: 代码已经复制到剪贴板
配置入口和出口
webpack.config.js:
const path = require('path') module.exports = { entry: './src/main.js', output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } }
@CodePoet: 代码已经复制到剪贴板
# 2. 配置html模版和清理dist的插件
cnpm i --save-dev html-webpack-plugin clean-webpack-plugin
@CodePoet: 代码已经复制到剪贴板
const path = require('path') + const HtmlWebpackPlugin = require('html-webpack-plugin') + const { CleanWebpackPlugin } = require('clean-webpack-plugin') module.exports = { entry: './src/main.js', output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') - } + }, + plugins: [ + new CleanWebpackPlugin(), // 清理dist + new HtmlWebpackPlugin({ // html模版 + title: 'webpack-vue', + template: './public/index.html' + }) + ] }
@CodePoet: 代码已经复制到剪贴板
# 3. 保证能本地启动web服务器
模拟vue-cli
的开发环境
cnpm i --save-dev webpack-dev-server
@CodePoet: 代码已经复制到剪贴板
const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const { CleanWebpackPlugin } = require('clean-webpack-plugin') module.exports = { entry: './src/main.js', output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') }, + devServer: { + contentBase: './dist', + open: true + }, plugins: [ new CleanWebpackPlugin(), // 清理dist new HtmlWebpackPlugin({ // html模版 title: 'webpack-vue', template: './public/index.html' }) ] }
@CodePoet: 代码已经复制到剪贴板
并在package.json
中添加两条脚本命令, 一个是本地的开发命令, 一个是发布到生产环境的打包命令:
{ "scripts": { "serve": "webpack-dev-server", "build": "webpack" } }
@CodePoet: 代码已经复制到剪贴板
# 4. 保证能使用vue单文件
cnpm i -D vue-loader vue-template-compiler
@CodePoet: 代码已经复制到剪贴板
const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const { CleanWebpackPlugin } = require('clean-webpack-plugin') + const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { entry: './src/main.js', output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') }, devServer: { contentBase: './dist', open: true }, + module: { + rules: [{ + test: /.vue$/, + loader: 'vue-loader' + }] + }, plugins: [ new CleanWebpackPlugin(), // 清理dist new HtmlWebpackPlugin({ // html模版 title: 'webpack-vue', template: './public/index.html' - }) + }), + new VueLoaderPlugin() ] }
@CodePoet: 代码已经复制到剪贴板
# 5. 处理css
cnpm i --save-dev style-loader css-loader vue-style-loader
@CodePoet: 代码已经复制到剪贴板
在webpack.config.s
中配置规则:
module.exports = { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }
@CodePoet: 代码已经复制到剪贴板
(由于之前安装了vue-loader
, 它能够处理每个vue
文件中scoped
的样式, 所以不要额外处理)
(安装vue-style-loader
, 使得我们编辑vue
文件中的<style>
能够热重载)
# 6. 编写基本代码并跑一个试试
完成上述操作, 让我们写一些简单的代码看看能不能将项目跑起来.
这里我是模拟vue-cli
的项目结构进行配置的:
src/main.js:
import Vue from 'vue'; import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App) }).$mount('#app')
@CodePoet: 代码已经复制到剪贴板
src/App.vue:
<template> <div id="app"> <div class="content"> {{ msg }} </div> </div> </template> <script> export default { name: 'app', components: {}, data() { return { msg: 'Hello LinDaiDai222' } } } </script> <style> body { margin: 0; } </style>
@CodePoet: 代码已经复制到剪贴板
public/index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We're sorry but bpmn-vue-basic doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> </body> </html>
@CodePoet: 代码已经复制到剪贴板
这个文件是为了提供一个生成html
的模版.
Now let's try!!!
允许之前配置好的指令:
npm run serve
@CodePoet: 代码已经复制到剪贴板
发现是可以正常打开显示页面的, 而且更新了本地代码, 页面也会自动重载.
# 处理资源路径
为了处理项目中的资源路径, 例如img
标签的src
, 我们需要用到file-loader
或者url-loader
.
如果不做这些处理的话, 在项目使用图片就会报错了.
两种loader
都可以.
# 1. 使用file-loader
cnpm i --save-dev file-loader
@CodePoet: 代码已经复制到剪贴板
module.exports = { rules: [ { test: /.(png|jpg|svg|gif)$/, use: [ { loader: 'file-loader', options: { esModule: false // 配置此选项保证能在html中加载图片路径 } } ] } ] }
@CodePoet: 代码已经复制到剪贴板
# 2. 使用url-loader
cnpm i --save-dev url-loader file-loader
@CodePoet: 代码已经复制到剪贴板
module.exports = { rules: [ { test: /.(png|jpg|svg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 40000, // 大于该值则交给 file-loader 处理 esModule: false // 配置此选项保证能在html中加载图片路径 } } ] } ] }
@CodePoet: 代码已经复制到剪贴板
# 3. 添加一张png图片
在App.vue
中添加一张图片:
<img src="./assets/LinDaiDai.png" />
@CodePoet: 代码已经复制到剪贴板
用上面两种配置方式, 都可以正常显示.
# 使用预处理器sass
安装:
cnpm i -D sass-loader node-sass
@CodePoet: 代码已经复制到剪贴板
配置:
rules: [{ test: /\.scss$/, use: [ 'vue-style-loader', 'css-style-loader', 'sass-loader' ] }]
@CodePoet: 代码已经复制到剪贴板
在styles
文件夹下新建common.scss
:
.color_blue { color: blue; }
@CodePoet: 代码已经复制到剪贴板
在main.js
中引用:
import './styles/common.scss'
@CodePoet: 代码已经复制到剪贴板
# 使用预处理器Babel
cnpm i --save-dev babel-loader @babel/core @babel/preset-env
@CodePoet: 代码已经复制到剪贴板
rules: [{ test: /\.js$/, loader: 'babel-loader', exclude: file => ( // 排除依赖 && 但是保证依赖文件夹中的vue单文件 /node_modules/.test(file) && !/\.vue\.js/.test(file) ), use: [{ loader: 'babel-loader', options: { presets: ["@babel/preset-env"] // 将ES6+ 转换为 ES5 } }] }]
@CodePoet: 代码已经复制到剪贴板
# 使用Eslint
cnpm i -D eslint eslint-loader eslint-plugin-vue
@CodePoet: 代码已经复制到剪贴板
webapack.config.js:
rules: [{ enforce: 'pre', test: /\.(vue|js)$/, loader: 'eslint-loader', options: { "failOnError": true // 有错误时页面加载失败 }, exclude: /node_modules/ }]
@CodePoet: 代码已经复制到剪贴板
.eslintrc
{ "parserOptions": { "ecmaVersion": 2015, "sourceType": "module" }, "extends": ["plugin:vue/essential"], "rules": { "no-console": "error" // 不能使用console.log(), 如果要能使用则设置成 off } }
@CodePoet: 代码已经复制到剪贴板
阅读全文
← loader篇 webpack4升级篇 →