这篇随笔会陆续地更新下去，用于汇集一些关于Webpack的初学跳坑总结还有VueJS的基础知识。
Webpack部分
① 快速建立一个Webpack-Vue项目开发环境(4.36.1-2019/08/07)
Step 1 安装 Webpack：
| 1 |
| npm install webpack -g |
Step 2 Webpack 4 需要再安装 Webpack-Cli：
| 1 |
| npm install webpack-cli -g |
Step 3 快速初始化一个Vue项目
| 1 |
| npm init --yes |
安装Vue和Webpack-dev-server
| 1 |
| npm install vue --save |
这里安装webpack-dev-server，目的是方便调试，其热加载工具可以侦测项目文件夹下的文件变动，相应地进行自动刷新，当然，还需要手动配置，后面会讲到。
| 1 |
| npm install webpack-dev-server --save |
项目文件夹下安装，webpack，webpack-cli
| 1 |
| npm install webpack --save |
webpack现在的版本需要这样安装webpack-cli
| 1 |
| npm install -D webpack-cli --save |
安装vue-loader，同时还要安装vue-template-complier
| 1 |
| npm install vue-loader vue-template-compiler --save |
Step 4 开始动工一个项目
创建文件夹目录和文件，例如项目根目录叫做webpack-test，其下创建2个文件夹：dist/、src/，创建3个文件：index.html、packge.json、webpack.config.js，src/下创建main.js、templates/以及templates/main.vue，具体文件关系如下图：
按照如下编辑文件内容：
index.html
COPY
EXPAND
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
| 8 |
| 9 |
| 10 |
| 11 |
| 12 |
| 13 |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> |
| <title>webpack-test</title> |
| </head> |
| <body> |
| <div id="app"></div> |
| </body> |
| <script src="./dist/build.js" type="text/javascript"></script> |
| </html> |
index.html
COPY
EXPAND
package.json
COPY
EXPAND
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
| 8 |
| 9 |
| 10 |
| 11 |
| 12 |
| 13 |
| 14 |
| 15 |
| 16 |
| 17 |
| 18 |
| 19 |
| 20 |
| 21 |
| 22 |
| 23 |
| { |
| "name": "webpack-test", |
| "version": "1.0.0", |
| "description": "webpack-test", |
| "main": "index.js", |
| "scripts": { |
| "dev": "webpack-dev-server --open --hot --mode development", |
| "build": "webpack --progress --hide-modules --mode production" |
| }, |
| "keywords": [], |
| "author": "", |
| "license": "ISC", |
| "dependencies": { |
| "vue": "^2.6.10", |
| "vue-loader": "^15.7.1", |
| "vue-template-compiler": "^2.6.10", |
| "webpack": "^4.39.1", |
| "webpack-dev-server": "^3.7.2" |
| }, |
| "devDependencies": { |
| "webpack-cli": "^3.3.6" |
| } |
| } |
package.json
COPY
EXPAND
webpack.config.js
COPY
EXPAND
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
| 8 |
| 9 |
| 10 |
| 11 |
| 12 |
| 13 |
| 14 |
| 15 |
| 16 |
| 17 |
| 18 |
| 19 |
| 20 |
| 21 |
| 22 |
| 23 |
| 24 |
| 25 |
| 26 |
| 27 |
| 28 |
| 29 |
| 30 |
| 31 |
| 32 |
| 33 |
| 34 |
| 35 |
| 36 |
| const path = require("path"); |
| // vue-loader |
| const VueLoaderPlugin = require("vue-loader/lib/plugin"); |
| const argvs = require("process").argv; |
| module.exports = { |
| entry: './src/main.js', // 项目的入口文件，webpack会从main.js开始，把所有依赖的js都加载打包 |
| output: { |
| path: path.resolve(__dirname, './dist'), // Webpack 打包目标文件夹 |
| // publicPath: './dist', // webpack-dev-serve 访问路径 |
| // 判断是开发模式还是打包发布模式设置合理的文件路径 |
| publicPath: argvs[argvs.indexOf("--mode")+1] === "development" ? "/dist/" : "./dist/", |
| filename: 'build.js' // 打包后的文件名 |
| }, |
| devServer: { |
| historyApiFallback: true, // 404 则返回到 index.html |
| overlay: true, // html 页面顶层显示报错提示信息 |
| // clientLogLevel: "none" // 减少浏览器控制台 log |
| }, |
| resolve: { |
| alias: { |
| vue$: "vue/dist/vue.esm.js" |
| } |
| }, |
| module: { |
| rules: [ |
| { |
| test: /\.vue$/, |
| loader: "vue-loader" |
| } |
| ] |
| }, |
| plugins: [ |
| // 加载 vue-loader |
| new VueLoaderPlugin() |
| ] |
| }; |
webpack.config.js
COPY
EXPAND
main.js
COPY
EXPAND
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
| import Vue from "vue"; |
| import appMain from "./templates/main.vue"; |
| new Vue({ |
| "el": "#app", |
| "template": "<app-main/>", |
| "components": { appMain } |
| }) |
main.js
COPY
EXPAND
main.vue
COPY
EXPAND
| 1 |
| 2 |
| 3 |
| 4 |
| 5 |
| 6 |
| 7 |
| 8 |
| 9 |
| 10 |
| 11 |
| 12 |
| 13 |
| 14 |
| 15 |
| <template> |
| <div class="main"> |
| <p v-text="txt">...</p> |
| </div> |
| </template> |
| <script> |
| export default { |
| "name": "appMain", |
| data () { |
| return { |
| txt: "Hello,Vue!" |
| } |
| } |
| } |
| </script> |
main.vue
COPY
EXPAND
Step 5 webpack 使用
先运行打包看看：
| 1 |
| npm run build |
之后便在 dist/ 下打包好一个 build.js 文件
开发模式，热加载，很方便，一旦它监测文件更改，便会热加载，解放了键盘刷新操作，很省心。
| 1 |
| npm run dev |
之后会开启一个webpack-dev服务，然后默认浏览器跳转到 localhost 页面，不出意外，屏幕上已经打印出了 Hello, Vue! ：
