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翻译

大致意思如下:

  1. 未设定 mode,这是 webpack 4 引入的,有俩种模式,development 与 production,默认为 production - 其实还有一个隐藏的 none 模式,
  2. 入口模块不存在 - 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

打开浏览器,输入:

localhost:8080

加参数后,只是为了适合更加简单的搭配使用!

下面创建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入门以及使用的更多相关文章

  1. webpack4.0入门配置文件

    wepback风头正火 ,但是公司一直在用gulp,正好赶上年底活动,借此机会第一次尝试了webpack,说实话webpack真的很强大,内容一层一层递进. 这几天跟着官网跑了一遍,然后写了自己的配置 ...

  2. webpack4.0入门总结

    1. 安装webpack: // 初始化.安装webpack以及webpack-clinpm init npm install --save-dev webpack webpack-cli 2.创建配 ...

  3. 史上最走心webpack4.0中级教程——配置之外你应该知道的事

    <webpack4.0各个击破系列>适合不满足于只会配置webpack但一时间又看不懂源码的中级读者.我没法保证这个系列是最好的,但至少能保证每一篇博文都跟那些Ctrl+C和Ctrl+V的 ...

  4. ASP.NET Core 1.0 入门——了解一个空项目

    var appInsights=window.appInsights||function(config){ function r(config){t[config]=function(){var i= ...

  5. ASP.NET Core 1.0 入门——Application Startup

    var appInsights=window.appInsights||function(config){ function r(config){t[config]=function(){var i= ...

  6. Omnet++ 4.0 入门实例教程

    http://blog.sina.com.cn/s/blog_8a2bb17d01018npf.html 在网上找到的一个讲解omnet++的实例, 是4.0下面实现的. 我在4.2上试了试,可以用. ...

  7. 《VC++ 6简明教程》即VC++ 6.0入门精讲 学习进度及笔记

    VC++6.0入门→精讲 2013.06.09,目前,每一章的“自测题”和“小结”三个板块还没有看(备注:第一章的“实验”已经看完). 2013.06.16 第三章的“实验”.“自测题”.“小结”和“ ...

  8. spring web flow 2.0入门(转)

    Spring Web Flow 2.0 入门 一.Spring Web Flow 入门demo(一)简单页面跳转 附源码(转) 二.Spring Web Flow 入门demo(二)与业务结合 附源码 ...

  9. Json.Net6.0入门学习试水篇

    原文:Json.Net6.0入门学习试水篇 前言 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.简单地说,JSON 可以将 JavaScript 对象中 ...

随机推荐

  1. One-to-one

    创建模型 在本例中,Place 和 Restaurant 为一对一关系 from django.db import models class Place(models.Model): name = m ...

  2. Solr通过配DIH对数据库数据做索引

    1 加入相关jar包 将2个相关jar包复制到/opt/solr-7.7.1/server/solr-webapp/webapp/WEB-INF/lib文件夹下 jar包名称 solr-dataimp ...

  3. 快速入门Pandas

    教你十分钟学会使用pandas. pandas是python数据分析的一个最重要的工具. 基本使用 # 一般以pd作为pandas的缩写 import pandas as pd # 读取文件 df = ...

  4. luogu3834 【模板】可持久化线段树 1(主席树)

    关于空间,第零棵树是 \(4n\),其后每棵树都要多来 \(\log(n)\) 的空间,所以我是开 \(n(4+\log(n))\) 的空间. 关于借用节点: 图片来自这里 #include < ...

  5. luogu2051 [AHOI2009]中国象棋

    巨水,调了好久,心态爆炸 #include <iostream> #include <cstring> #include <cstdio> using namesp ...

  6. log日志,crontab

    定期备份mysql的log日志文件,保留一个月 将文件压缩为gzip格式,节省空间,备份到/home/shell/myqsl_back/目录下,保留一个月mysql_backup备份的脚本 #!/bi ...

  7. 【Luogu】P1417烹调方案(排序01背包)

    题目链接 对食材进行排序,重载运算符代码如下: struct food{ long long a,b,c; bool operator <(const food &a)const{ re ...

  8. BZOJ 2331 [SCOI2011]地板 ——插头DP

    [题目分析] 经典题目,插头DP. switch 套 switch 代码瞬间清爽了. [代码] #include <cstdio> #include <cstring> #in ...

  9. [BZOJ2342] [Shoi2011]双倍回文(manacher)

    传送门 manacher...... 先跑一边manacher是必须的 然后枚举双倍回文串的对称轴x 把这个双倍回文串分成4段,w wR w wR 发现,只有当 y <= x + p[x] / ...

  10. 【树状数组区间修改单点查询+分组】HDU 4267 A Simple Problem with Integers

    http://acm.hdu.edu.cn/showproblem.php?pid=4267 [思路] 树状数组的区间修改:在区间[a, b]内更新+x就在a的位置+x. 然后在b+1的位置-x 树状 ...