从零开始搭设vue项目"/>
webpack4+加vue2+从零开始搭设vue项目
webpack4+加vue2+从零开始搭设vue项目
- 起步
- 1.初始化项目
- 2.安装依赖
- 3.目录文件配置
- 4.配置index.html及webpack.config.js
- 5.vue的起步
- 解决方案 一
- 解决方案 二(常规操作)
- 解决方案 三
- 引入css和scss
- 语法转译 ES6 => ES5
- 这里有两种方案
- 方案一
- 方案二
- 文章最后
- 2019年6月16日文章更新webpack代理配置
- 安装依赖 [webpack-dev-server]()
- 修改配置如下
本地环境
node -v // v9.1.0
npm -v // 6.5.0
webpack -v // 4.32.2
webpack-cli -v // 3.3.2
这里需要注意的是webpack4+以后需要单独安装webpack-cli
起步
1.初始化项目
npm init
一直enter生成package.json文件（小技巧:npm init -y 可以免去繁琐的enter）
2.安装依赖
npm i webpack webpack-cli webpack-dev-server --save-dev
想要深入上述依赖请转webpack文档
依赖安装成功接下来就开始动手吧
3.目录文件配置
根目录鼠标右键新建index.html webpack.config.js src文件夹或：
// window
type >webpcak.config.js
type >index.html
md src//mac 土豪玩家
touch webpcak.config.js
touch index.html
mkdir src
src目录下面新建 main.js
此时目录如下
project/src/main.jswebpack.config.jsindex.htmlpackage.json内容如下：
//index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>webpack从零搭设</title>
</head>
<body>
<div id="app"></div>
</body>
</html>// webpack.config.js
const path = require('path');
const webpack = require('webpack');
modul.exports = {}
4.配置index.html及webpack.config.js
首先
main.js修改如下:
// src/main.js
console.log('hello world');
webpack.config.js修改如下:
// webpack.config.js
const path = require('path');
const webpack = require('webpack');module.exports = { // module.exports commonjs规范entry: './src/main.js', // 项目入口文件，webpack将从main.js开始，把所有依赖的js都打包output: {path: path.resolve(__dirname, './dist'), // 项目的打包后的输出路径 可修改publicPath: '/dist/', // 通过devServer访问路径 可修改filename: 'build.js' // 打包后的文件名 可修改},devServer: {historyApiFallback: true, // When using the HTML5 History API, the `index.html` page will likely have to be served in place of any `404` responsesoverlay: true //Shows a full-screen overlay in the browser when there are compiler errors or warnings. Disabled by defa更多推荐
webpack4+加vue2+从零开始搭设vue项目
发布评论