vue学习

本文详细介绍了从安装node.js开始,逐步搭建并配置webpack,包括安装webpack、webpack-cli、lodash、style-loader、css-loader、file-loader,导入css和图片,使用html-webpack-plugin插件,设置实时刷新页面的webpack-dev-server,以及结合express服务器的配置过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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: '/',
    },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值