webpack
今天也在好好加油呀
这个作者很懒,什么都没留下…
展开
-
在webpack项目中使用vue
步骤:1.安装插件2.import并挂载,注意大小写3.运行原创 2020-07-08 11:20:14 · 247 阅读 · 0 评论 -
webpack:Vue单文件组件处理
1.在js文件中import vue文件的组件,如:2.安装插件npm i vue-loader vue-template-compiler -D3.修改webpack.config.js文件4.运行成功原创 2020-07-08 11:09:39 · 364 阅读 · 0 评论 -
webpack:打包js高级语法
例如,一个js文件里有以下语法,直接运行会报错的,需要安装插件。1.安装插件:npm install babel-loader @babel/core @babel/runtime -D npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D2.修改webpack.config.js,添加画圈的语句3.新建babel.config.js文件,添加语句:原创 2020-07-08 00:34:31 · 496 阅读 · 1 评论 -
webpack:通过loader打包非js模块
loader调用过程:CSS文件:未添加loader之前,若有css文件,运行会报以下错:解决:添加相应的loader:1.安装插件npm install --save-dev style-loader css-loader2.在webpack.config.js加入module那块3.运行,不会报错了。图片文件:未添加图片相关的loader前,会报以下错:解决:添加loader:1.安装插件npm install --save-dev file-loadernpm i原创 2020-07-07 23:51:37 · 168 阅读 · 0 评论 -
webpack:配置html-webpack-plugin生成预览页面
未配置该插件之前,一开始打开的是如下页面:该插件的作用就是,一打开就是HTML页面,安装插件的方法:1.安装插件npm install html-webpack-plugin -D2.修改webpack.config.js文件的头部区域,添加以下信息:3.修改webpack.config.js文件中向外导出配置对象,如下:4.运行打开页面后,就是刚刚设的那个页面,如我设的是index.html页面,打开就是我所设的index.html页面,而不是有文件夹那个页面:...原创 2020-07-07 21:39:44 · 284 阅读 · 0 评论 -
webpack配置自动打包
1.安装 npm install webpack-dev-server -D 2.修改package.json->scripts中的命令:3.修改index.html中,修改引用script的路径:4.运行npm run dev运行成功:按住Ctrl点击该地址会打开以下界面:点击页面存放的文件夹src,就会看到所编写的页面,如我写的:5.测试下是否配置自动打包成功:如:(1)修改js修改下颜色:(2)直接查看页面,即可发现,颜色已改变:说明自动打包已成原创 2020-07-07 16:17:00 · 456 阅读 · 0 评论 -
webpack起步安装
1.首先建一个目录2.进入到该目录3.初始化npm init -y4.安装 webpack-clinpm install webpack webpack-cli --save-dev5.安装jquerynpm install jquery -S6.写一个初始的HTML页面与js7.添加webpack.config.js文件const path = require('path')module.exports = { mode: 'development',原创 2020-07-07 15:54:00 · 107 阅读 · 0 评论