webpack
jiaojsun
做一只快乐的小码龙
展开
-
package.json的所有配置项及其用法,你都熟悉么
https://www.cnblogs.com/datiangou/p/10172994.html写在前面在前端开发中,npm已经是必不可少的工具了。使用npm,不可避免的就要和package.json打交道。平时package.json用得挺多,但是没有认真看过官方文档。本文结合npm官方文档以及自己平时使用过程中的感悟,谈一谈package.json。官方文档在这里。初始化使用npm init命令就可以初始化一个package.json文件。在初始化的过程中,会叫用户输入name, ve转载 2020-05-09 16:50:56 · 295 阅读 · 0 评论 -
webpack教程--02插件
webpack plugin大家还记得在上一节中,下面这个index.html是我们手动创建的,其实没有必要手动,webpack有一个插件就可以帮我们做这个事情。首先删掉这个html文件,然后在终端运行npm i -D html-webpack-plugin,打开package.json可以看到下面一行代码在webpack.config.dev.js添加以下代码接着np...原创 2018-10-10 11:57:43 · 420 阅读 · 0 评论 -
webpack教程--03loader
loader就是webpack用来预处理模块的,在一个模块被引入之前,会预先使用loader处理模块内容还是上一节课的代码,这节课我们会引入react,首先进行两个操作 npm i npm i -S react react-dom然后会看到package.json里面出现了这几行代码,表明react安装成功 然后在app.js中添加以下代码但是因为js文件里面包含了...原创 2018-10-10 15:01:24 · 239 阅读 · 0 评论 -
webpack教程--18此 publicPath 和彼publicPat
上一节的问题可以这样解决重新打开页面,加载成功但是这样的话 npm start之后,无法找到界面了。可以这样修改,注释带有fff的地方 这样npm start之后就可以找到了 http://localhost:9000/现在添加这样一个目录但是这样的话,就成功了详细请结合文档,这一系列教程只是入门。 ...原创 2018-10-19 16:33:37 · 312 阅读 · 2 评论 -
webpack教程--13css模块化(三)
在上一节我们发现一个问题,经过模块化的class是一串字符,这样阅读起来很不友好,那如何进行语义化呢?回忆一下上一节的代码配置文件添加以下代码运行如下,记得先npm start一下 ...原创 2018-10-17 09:48:14 · 140 阅读 · 0 评论 -
webpack教程--14使用Less和Scss
首先需要安装一下 npm i -D sass-loader@6 node-sass@4同时安装会出错,分开安装就好了,在控制台运行npm i -D sass-loader@6npm i -D node-sass@4首先,添加一个文件引入该文件,并添加类配置如下运行成功假如想模块化怎么办?当然和css的一样,详细可以参照上一节。less和sas...原创 2018-10-17 10:50:35 · 757 阅读 · 0 评论 -
webpack教程--15babel 准备 babel 运行
babel是一个强大的javascript编译器es6=>可以编译成es5代码,然后交给浏览器去执行。首先新建一个项目,然后npm init,出现选项一直默认回车就可以了接着运行npm i -D babel-cli@6然后新建文件添加一些ES6的代码因为babel并没有全局安装,所以使用 ./node_modules/.bin/babel src/app,js来编译,...原创 2018-10-17 11:33:02 · 168 阅读 · 0 评论 -
webpack教程--16使用babel插件和预设
所谓预设,打个比方就是,不用一个一个去下载babel的插件,而是用一个预设去涵盖所有的插件。在控制台直接打印 npm i -D babel-preset-es2015新建一个文件运行npm run babel如何将编译之后的文件输出呢,可以这样做...原创 2018-10-17 14:54:36 · 601 阅读 · 0 评论 -
webpack常见面试题
1.从零开始搭建一个简单的基于webpack的vue开发环境a.安装webpack npm i webpack -gb.项目初始化 1)新建项目文件夹‘myproject’ 2)创建package.json.。 npm init -y 3)安装vue,webpack,webpack-dev-server npm i vue --save...原创 2019-06-27 10:57:46 · 11560 阅读 · 0 评论 -
webpack教程--12css模块化(二)
在实际项目中,有些是全局的样式,就不需要进行模块化,所以要使两种情况并存的话,我们可以这样做。首先在配置文件中写以下代码新建main.js文件 相应的引入发现都被加载出来了...原创 2018-10-16 19:05:37 · 230 阅读 · 0 评论 -
webpack教程--01打包初体验
"webpack": "^4.20.2",首先,新建这样一个项目,代码如下,注意a.js,b.js,c.js类似; 接着在src同级的目录下,新建一个webpack.config.dev.js文件,添加以下代码,同时新建dist目录。如下所示在控制台运行 npm init -y,会出现一个package.json文件接着安装开发的依赖npm i -D webpack,会...原创 2018-10-10 11:13:00 · 164 阅读 · 0 评论 -
webpack教程--11css模块化(一)
所谓模块化就是把类名进行重新的编码,首先把css-loader的版本会退一下,因为高版本的会出问题npm i -D css-loader@0首先配置如下代码,代表可以进行模块化添加以下两个css文件 引入,注意引入的方式,以及className里面的书写方式npm start...原创 2018-10-16 18:00:59 · 602 阅读 · 0 评论 -
webpack教程--04devserve
开发服务器npm i -D webpack-dev-server@2 (安装2的最高版本的意思,因为本教程是关于webpack3的)然后添加以下代码运行npm start出现网址 http://localhost.8081/。操作成功。该插件可以自动刷新界面内容,假如在代码中写一个U,保存之后会自动刷新,如下所示这个开发服务器的功能有很多,也可以在文件中进行配置...原创 2018-10-12 10:57:30 · 580 阅读 · 0 评论 -
webpack教程--05引入 css 样式
首先新建文件,添加代码然后添加以下配置 然后在控制台输入npm i -D css-loader还有一个重要的一步,引入但是这样的话npm start之后发现背景并没有生效,这个时候还需要做另外一件事,添加style-loader然后安装npm i -D style-loader 接着npm start,生效!当然也可以引入一个class在app...原创 2018-10-12 16:01:54 · 1070 阅读 · 0 评论 -
webpack教程--17输出路径处理
打包路径处理这是一个可以清理打包后文件夹的插件npm i -D clean-webpack-plugin@0然后这样引入这样每次npm run dev的时候就会自动更新dist文件夹的内容要想每次都输出到指定的目录,以及到相对应的名称,可以这样配置同样的图片和js的文件也做相应处理然后再本地打开index.html文件,报错下一节来解决这个问题 ...原创 2018-10-18 11:16:20 · 781 阅读 · 0 评论 -
webpack教程--06引入图片(一)
首先添加然后css文件编写以下代码引入然后配置控制台执行命令npm i -D file-loader@1然后npm start,出现以下界面,表示成功原创 2018-10-16 11:50:38 · 365 阅读 · 0 评论 -
webpack教程--07引入图片(二)
继续用上一节课的代码,注销这里的添加代码npm start,出现下面表示成功原创 2018-10-16 14:30:12 · 211 阅读 · 0 评论 -
webpack教程--08使用url-loader引入图片
增强的file-loader:url-loader将图片编码成另外的格式(base64)如果图片比较小可以用这种方式,过大的话还是打包成图片----------------------------------------------------------------------------------------------------------------------------...原创 2018-10-16 15:13:22 · 883 阅读 · 0 评论 -
webpack教程--09引入字体(一)
引入字体,添加代码。配置代码 npm start原创 2018-10-16 16:38:11 · 654 阅读 · 0 评论 -
webpack教程--10引入字体(二)
如何使用第三方提供的字体呢?在控制台安装 npm i -S font-awesome然后添加代码,注意import的内容是从node_modules包里面引入的。className='fa fa-rocket'这个里面的值是从font-awesome官网查询的。npm start之后...原创 2018-10-16 17:31:21 · 392 阅读 · 0 评论 -
webpack打包常见报错
1. webpack打包报错:ERROR in Error: Child compilation failed:Entry module not found: Error: Can’t resolve ‘html-loader’ in ‘D:\Documents\Gi tHub\webpack-demo’: 如下图片所示 解决办法:npm install html-loader原创 2017-08-29 23:00:35 · 3717 阅读 · 0 评论