1、下载安装node.js
点击该网址https://nodejs.org/en/download/ ,选择合适的版本,我用的最新版node-v12.16.0-x64.msi,点击下一步下一步安装即可,也可选择安装到自己其它的硬盘,默认c盘。
2、查看node.js版本
在命令行输入node -v 回车,将回显nodeJs已安装的版本号(v12.16.0)。
3、查看npm版本
新版nodeJs集成了npm,在命令行输入npm -v,将回显npm安装的版本号(6.13.4).
4、webpack构建vue项目
新建一个项目目录,cd /d 定位进去,然后输入npm init。会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行npm init -y 直接跳过,这样就在项目目录下生成了一个package.json文件。
生成package.json.
5、安装webpack,高版本webpack需要安装webpack-cli。
npm install webpack webpack-cli --save--dev.
6、安装lodash组件,在index.js里面import组件。
npm install --save lodash
7、新建dist文件夹,创建index.html,创建分发发布版。
8、执行npx webpack,会在dist文件夹下生成main.js(js压缩优化输出),index.html引用main.js。
9、js导入css
执行npm install --save-dev style-loader css-loader命令,安装style-loader、css-loader组件
在index.js中 import "./style.css"; js与css在同一目录要加./
10、导入图片
执行npm install --save-dev file-loader
在index.js中
import _ from 'lodash';
import './style.css';
import Icon from './qr-code.png';
function component() {
const element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack', 'and the world'], ' ');
element.classList.add('hello');
//Add the image to our existing div.
const myIcom = new Image();
myIcom.src = Icon;
element.appendChild(myIcom);
return element;
}
document.body.appendChild(component());
在css导入image
.hello{
font-size: 30px;
color: red;
background: url('./qr-code.png');
}
11、安装html-webppack-plugin插件,实现将webpack.config.js 中的entry js集合动态输出到index.html中
执行命令npm install --save-dev html-webpack-plugin
12、在webpack.config.js设置mode及devtool可用于堆栈追踪
mode: 'development',
devtool: 'inline-source-map',
13、安装实时刷新页面更新组件 npm install --save-dev webpack-dev-server
webpack.config.js添加如下配置
devServer:{
contentBase: './dist',
}
14、安装webpack-dev-middleware与express服务器
执行命令 npm install --save-dev express webpack-dev-middleware
修改webpack.config.js配置,如下
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
+ publicPath: '/',
},