Webpack安装和命令
1.定位到创建的目录
cd H:\webpacktest
2.初始化:
npm init
3.一路回车
4.执行(安装到项目的依赖项中)
npm install webpack --save-dev
注意:文件夹千万不要命名为webpack
如果报这个错误:

执行删除命令:重新安装
npm remove npm
重新命名文件夹:webpacktest
npm install css-loader style-loader --save-dev
安装到全局环境的命令:
npm install webpack -g
只有安装到全局变量中才能执行编译命令
打包命令:
webpack entry.js bundle.js
打包成功显示的内容:

打包文件夹中的内容:

打包css文件报错:

安装css-loader
npm install css-loader style-loader --save-dev
引入css的语法:
require('css-loader!./style.css')
引入style的语法:
require('style-loader!css-loader!./style.css')
直接在命令行中绑定:
webpack hello.js bundle.js --module-bind 'css=style-loader!css-loader'
自动打包参数:
webpack hello.js bundle.js --watch
查看打包的过程:
webpack hello.js bundle.js --progress --display-modules
在package.json中添加:
"webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reason"
运行
npm run webpack
中文文档:
https://doc.webpack-china.org/configuration/
Webpack安装和命令的更多相关文章
- webpack 介绍 & 安装 & 常用命令
webpack 介绍 & 安装 & 常用命令 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 webpa ...
- webpack学习(一):webpack 介绍&安装&常用命令
一.简单介绍 什么是Webpack Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 主要是用来打包在浏览器端使用的ja ...
- webpack介绍 安装 常用命令
Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑 ...
- webpack学习(一)安装和命令行、一次js/css的打包体验及不同版本错误
一.前言 找了一个视频教程开始学习webpack,跟着视频学习,在自己的实际操作中发现,出现了很多问题.基本上都是因为版本的原因而导致,自己看的视频是基于webpack 1.x版,而自己现在早已是we ...
- Webpack 入门(一):安装 / 打包 / 命令行
一:安装webpack和基本环境搭建 新建一个工作的文件夹(我取的名字叫Webpack) 打开命令行,cd进入该文件夹 //初始化一下npm > E:\work\Webpack>npm i ...
- 【JavaScript】 Webpack安装及文件打包
背景 最近开启一个新项目,需要对前端的各类资源文件进行打包,经过多方调研后,决定使用webpack工具.但是网上的教程多是将webpack直接作为服务器使用,而我只是想将其作为单纯的资源打包工具而已. ...
- webpack安装配置使用教程详解
webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...
- webpack安装配置
webpack安装 1.安装之前你必须要安装node.js,如果你没安装可以在node.js网去下载node.js 2.全局安装webpack,打开cmd输入npm install webpack - ...
- 前端自动化构建工具webpack (一)之webpack安装 和 设置webpack.confi.js
目的: 模块化开发,组件化开发,让代码符合开发规范,更高效 webpack作用:从pack,就知道这是包的意思,比较专业点叫做前端自动化打包构建工具,代码错误检查,预处理,文件合并(打包),代码压缩 ...
随机推荐
- Hbase记录-HBase基本操作(二)
HBase Exists 可以使用exists命令验证表的存在.下面的示例演示了如何使用这个命令. hbase(main):024:0> exists 'emp' Table emp doe ...
- windows递归复制指定时间后修改过的文件
因为在拷贝web站点时,也会存在更新,需要定期覆盖新的内容,就是上次覆盖的时间和到这次时间内修改过的文件都复制. 实现命令xcopy xcopy src dest D:\WWW\phpMyAdmin\ ...
- spring boot 2.0.3+spring cloud (Finchley)2、搭建负载均衡Ribbon (Eureka+Ribbon+RestTemplate)
Ribbon是Netflix公司开源的一个负载均衡组件,将负载均衡逻辑封装在客户端中,运行在客户端的进程里. 本例子是在搭建好eureka的基础上进行的,可参考spring boot 2.0.3+sp ...
- UVALive - 7147 (数学)
题目链接 题意 n只队伍,两两之间会进行比赛,赢平输都有相应得分,所有比赛结束后,前m名可以晋级.问最大的不能晋级分数为多少,以及最小的能晋级的分数. 分析 智商题...按照要求来贪心1.没有晋级的队 ...
- Http请求中 content-type 和 dataType 区别
contentType: 告诉服务器,我要发什么类型的数据 dataType:告诉服务器,我要想什么类型的数据,如果没有指定,那么会自动推断是返回 XML,还是JSON,还是script,还是Stri ...
- MHA-Failover可能遇到的坑
一.主从数据一致性 1.1.如何保证主从数据一致性 参考叶师傅文章:FAQ系列 | 如何保证主从复制数据一致性 在MySQL中,一次事务提交后,需要写undo.写redo.写binlog,写数据文件等 ...
- MySQL(二)MySQL的启动或链接失败
有时候用命令mysql -u root -p 或者服务器启动mysql数据库的时候,会出现抛出异常并失败. 以下是遇过的异常. 1.1)抛出的异常:出现ERROR 2002 (HY000): Can' ...
- 如何调整cell的大小
一般情况下,我们使用tableview的时候从来没有设置过cell的大小(w,h).位置(x,y)等,而是系统直接给我们自动生成,但是有的时候我们可能会改动cell的大小及位置,比如:在适配ios6跟 ...
- 2017-2018-2 20155303『网络对抗技术』Exp9:Web安全基础
2017-2018-2 『网络对抗技术』Exp9:Web安全基础 --------CONTENTS-------- 一.基础问题回答 1.SQL注入攻击原理,如何防御? 2.XSS攻击的原理,如何防御 ...
- linux下mysql 5.7.22 安装
二进制安装 1.下载https://dev.mysql.com/downloads/mysql/5.6.html#downloads 2.官方文档https://dev.mysql.com/doc/r ...