webpack4.0入门以及使用
1. 安装webpack
先新建一个文件夹(demos),然后
npm init -y
新建一个package.json然后在当前目录执行webpack命令
webpack
模块未发现或者未找到src文件,我们新建src文件夹(demos/src)
mdkir src
难道我们全局安装的webpack没用吗?
最新官网出了一个常见的命令和一个参数: npx 和 -D 参数 (同时也昭告着,全局安装已经不再流行)
-D:--save-dev
npx:一个全新的本地安装器
全局安装:
npm i -g webpack && npm i -g webpack-cli && npm i -g webpack-dev-server
本地安装:
npm i -D webpack && npm i -D webpack-cli && npm i -D webpack-dev-server
无论是全局或者是本地,都可以使用! 最新的趋势就是本地(但你必须考虑外墙或使用淘宝镜像)
查看版本
npx webpack --version
那我们现在在当前目录执行
npx webpack
或
npm webpack
或
webpack
会出现什么情况?
很嗨皮,又是这个错误
实在看不懂,就去google翻译
大致意思如下:
- 未设定
mode
,这是 webpack 4 引入的,有俩种模式,development
与production
,默认为production
- 其实还有一个隐藏的none
模式, - 入口模块不存在 - webpack 4 默认从项目根目录下的
./src/index.js
中加载入口模块,所以我们或者新建一个src/index.js
文件,或者指定一个入口文件。
然后,我们新建一个src/index.js
然后在当前目录运行
1.webpack
或
2.npx webpack --mode development
卧槽,冒出来一个dist文件夹还有dist下面的main.js
还有啊,执行webpack那警告是什么啊?
警告配置
'模式'选项尚未设置。 将'mode'选项设置为'development'或'produ
ction'为该环境启用默认设置。
好吧,默认的webpack不行了,那我们采用第二种?
一点警告都没有! 我们启动了配置模式!!
我们在demos新建index.html
有的人很奇怪,为什么引用的是dist/main.js,而不是index.js,这主要是用户和我们开发用的ES7/8和浏览器兼容问题导致的
omg,缺少服务器,我的自动刷新怎么办!
npx webpack --mode development --watch
这样,就监控成功了,我们可以去index.js去修改一下并且查看
但是自动刷新浏览器,也就是热更新还未解决!
重新执行以下这条命令( webpack-dev-server
时指定 output.publicPath
):
npx webpack-dev-server --mode development --output-public-path dist
打开浏览器,输入:
加参数后,只是为了适合更加简单的搭配使用!
下面创建webapck.config.js(仿佛又回到了webpack3)
一个示例:安装css加载器
npm i -g css-loader style-loader
webpack.config.js
module.exports = {
module: {
rules: [{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
}]
}
}
webpack4.0入门以及使用的更多相关文章
- webpack4.0入门配置文件
wepback风头正火 ,但是公司一直在用gulp,正好赶上年底活动,借此机会第一次尝试了webpack,说实话webpack真的很强大,内容一层一层递进. 这几天跟着官网跑了一遍,然后写了自己的配置 ...
- webpack4.0入门总结
1. 安装webpack: // 初始化.安装webpack以及webpack-clinpm init npm install --save-dev webpack webpack-cli 2.创建配 ...
- 史上最走心webpack4.0中级教程——配置之外你应该知道的事
<webpack4.0各个击破系列>适合不满足于只会配置webpack但一时间又看不懂源码的中级读者.我没法保证这个系列是最好的,但至少能保证每一篇博文都跟那些Ctrl+C和Ctrl+V的 ...
- ASP.NET Core 1.0 入门——了解一个空项目
var appInsights=window.appInsights||function(config){ function r(config){t[config]=function(){var i= ...
- ASP.NET Core 1.0 入门——Application Startup
var appInsights=window.appInsights||function(config){ function r(config){t[config]=function(){var i= ...
- Omnet++ 4.0 入门实例教程
http://blog.sina.com.cn/s/blog_8a2bb17d01018npf.html 在网上找到的一个讲解omnet++的实例, 是4.0下面实现的. 我在4.2上试了试,可以用. ...
- 《VC++ 6简明教程》即VC++ 6.0入门精讲 学习进度及笔记
VC++6.0入门→精讲 2013.06.09,目前,每一章的“自测题”和“小结”三个板块还没有看(备注:第一章的“实验”已经看完). 2013.06.16 第三章的“实验”.“自测题”.“小结”和“ ...
- spring web flow 2.0入门(转)
Spring Web Flow 2.0 入门 一.Spring Web Flow 入门demo(一)简单页面跳转 附源码(转) 二.Spring Web Flow 入门demo(二)与业务结合 附源码 ...
- Json.Net6.0入门学习试水篇
原文:Json.Net6.0入门学习试水篇 前言 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.简单地说,JSON 可以将 JavaScript 对象中 ...
随机推荐
- 【chm】【windows】win7下chm打开不显示内容
修改chm属性里面,‘解除锁定’即可.点击chm文件,右键选择属性,点击最下方的解除锁定,保存,退出重新打开即可.
- ZZULIoj 1912 小火山的爱情密码
Description 小火山获得了一个字符串,然而大火山让小火山从里面截取一段字符串,并且让小火山截取的字符串满足一些字符达到一定数量. 小火山觉得很容易,但是他想要知道他至少得截取多长的字符串. ...
- Wannafly挑战赛23 A 字符串
题目描述 小N现在有一个字符串S.他把这这个字符串的所有子串都挑了出来.一个S的子串T是合法的,当且仅当T中包含了所有的小写字母.小N希望知道所有的合法的S的子串中,长度最短是多少. 输入描述: 一行 ...
- python基础学习笔记——列表技巧
列表: 循环删除列表中的每⼀个元素 li = [, , , ] for e in li: li.remove(e) print(li) 结果: [, ] 分析原因: for的运⾏过程. 会有⼀个指针来 ...
- Android 8.0 adb shell dumpsys activity activities | findstr mFocusedActivity 获取当前的 activity 显示空的
adb shell dumpsys activity activities | findstr mFocusedActivity Android 7.0 现象: Android 8.0 现象: 改用: ...
- [转]python 多线程threading简单分析
多线程和多进程是什么自行google补脑 对于python 多线程的理解,我花了很长时间,搜索的大部份文章都不够通俗易懂.所以,这里力图用简单的例子,让你对多线程有个初步的认识. 单线程 在好些年前的 ...
- Eclipse安装以及安装时遇到的问题解决办法
1, 首先要安装JDK(最好使用最新版本),注意区分32位于64位 2, 安装程序,双击打开安装即可 3, 安装包下载:http://developer.android.com/sdk/index.h ...
- 九度oj 题目1108:堆栈的使用
题目描述: 堆栈是一种基本的数据结构.堆栈具有两种基本操作方式,push 和 pop.Push一个值会将其压入栈顶,而 pop 则会将栈顶的值弹出.现在我们就来验证一下堆栈的使用. 输入: 对于每组测 ...
- 九度oj 题目1262:Sequence Construction puzzles(I)_构造全递增序列
题目描述: 给定一个整数序列,请问如何去掉最少的元素使得原序列变成一个全递增的序列. 输入: 输入的第一行包括一个整数N(1<=N<=10000). 接下来的一行是N个满足题目描述条件的整 ...
- 【bzoj1174】[Balkan2007]Toponyms Trie树
题目描述 给你一个字符集合,你从其中找出一些字符串出来. 希望你找出来的这些字符串的最长公共前缀*字符串的总个数最大化. 输入 第一行给出数字N.N在[2,1000000] 下面N行描述这些字符串,长 ...