webpack中用到的命令
时间:2020-05-13
本文章向大家介绍webpack中用到的命令,主要包括webpack中用到的命令使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.安装webpack(全局,最新版本)
npm install webpack
2.安装webpack-cli(开发版本)
npm install webpack-cli -D
3.初始化node
npm init -y
4.安装jquery
npm i jquery
5.安装webpack-dev-server (开发版本)
npm i webpack-dev-server -D
6.运行测试
npm run build
7.配置webpack-dev-server
方法一
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack-dev-server --open --port 3000 --contentBase src --hot", }
方法二:
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build2": "webpack-dev-server --open --port 3000 --contentBase src --hot", "build": "webpack-dev-server" }, 在webpack.config.js中配置 let webpack = require('webpack'); // 启动热更新的第二步 devServer: { // 这里配置dev-server命令的参数的第二种形式,相对来说,这个用的比较少,也比较麻烦 // webpack-dev-server --open --port 3000 --contentBase src --hot open: true, // 自动打开浏览器 port: 3000, // 设置端口号 contentBase: 'src', // 指定打开目录 hot: true // 热更新 第一步 }, plugins: [ // 配置插件的节点,数组,plugins需要配置很多的插件 new webpack.HotModuleReplacementPlugin(), // 第三部,new一个热更新的模块对象 ],
8.引入css
为什么需要安装css.loader?
因为webpack打包的时候,默认只能识别.js后缀的文件,其他的文件都不能识别
npm install style-loader css-loader -D
配置
module.exports = { module: { // 这个地方,用来配置,配置所有的第三方模块,加载器 rules: [{ test: /\.css$/, // 匹配所有的css文件 use: ['style-loader', 'css-loader'] // 匹配处理.css文件的第三方的loader }] } }
9.安装less.loader
npm install less-loader less --save-dev
10.安装img的loader
npm install url-loader --save-dev
11.小技巧命令
npm i
如果项目中没有node-modules文件夹,可以使用npm i一件安装所有的需要的包,前提是package.json的文件中有用的所有的包的版本和信息
原文地址:https://www.cnblogs.com/ranyihang/p/12883533.html
- 【深度学习系列】用PaddlePaddle进行车牌识别(一)
- GO语言-new()分配与构造和初始化结构
- Java基础-day05-超市收银系统案例题
- mongodb11天之屠龙宝刀(五)lbs地理位置检索:存储经纬度以及查询
- 【深度学习系列】关于PaddlePaddle的一些避“坑”技巧
- 【深度学习系列】PaddlePaddle可视化之VisualDL
- Java基础-day04-代码题
- 【深度学习系列】CNN模型的可视化
- mongodb11天之屠龙宝刀(六)mapreduce:mongodb中mapreduce原理与操作案例
- 真实场景的虚拟视点合成(View Synthsis)详解
- mongodb11天之屠龙宝刀(七)functions: mongodb 执行 functions入门案例
- 真实场景的双目立体匹配(Stereo Matching)获取深度图详解
- mongodb11天之屠龙宝刀(八)聚合函数与管道:sql与mongodb聚合函数对比
- Java基础-day04-基础题
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux内存管理 一个进程究竟占用多少空间?-VSS/RSS/PSS/USS
- Bash:选择结构之case
- ElasticSearch的Reindex
- 10行Python代码自动清理电脑内重复文件,解放双手!
- 【投稿】刀哥:Rust学习笔记 3
- 为你的数据添加置信区间
- Linux磁盘管理
- Vue项目中简单的store模式
- 5分钟学linux命令之split
- 分母为0一定会抛异常吗?
- 明明有class为什么还是报ClassNotFoundException?
- Maven 错误找不到符号
- 环境变量配置为jdk8,却显示java版本为jdk7
- Python脚本按照当前日期创建多级目录
- linux常用的读取文件内容指令