webpack4+加vue2+从零开始搭设vue项目
本地环境
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.js
webpack.config.js
index.html
package.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` responses
overlay<
最低0.47元/天 解锁文章
357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
