Webpack初步使用
时间:2019-06-17
本文章向大家介绍Webpack初步使用,主要包括Webpack初步使用使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前端使用vue时使用webpack打包工具:注意使用webpack打包工具时,不建议在html文件中引入任何其他文件 1.新建文件夹,在文件夹下创建目录 |--dist |--src |--css |--js |--img |--index.html |--main.js //这个是所有的Js文件的入口 |--webpack.config.js //这个是配置文件 //以上文件创建完成之后 在webpack.config.js配置信息: const path = require('path') module.exports = { entry: path.join(__dirname,'./src/main.js'),//入口,这里表示webpack要打包哪个文件 output:{ path:path.join(__dirname,'./dist'),//出口,表示webpack打包完后将文件输出到哪个目录 filename:'bundle.js'//这是指定输出的文件的名称 } } //若需要用到jquery,则在main.js文件中使用import方式导入 在main.js中配置 *import $ from 'jquery' 完成之后需要在npm中下载此依赖,下载方式:npm i jquery -s 下载完成之后,项目中会多出node_modules目录 //接着需要安装webpack打包工具,4.0以上版本还需要安装webpack-cli工具 *安装方式:cnpm i webpack -D 以及 cnpm i webpack-cli -D (虽然全局已经安装过webpack,但是在项目中还是需要安装此工具) 此时项目中会多出:package.json文件 //以上方式若我们有修改文件,我们每次更新都需要重新打包,所以为了减少不必要的打包操作,则引入自动打包工具webpack-dev-server *安装方式:cnpm i webpack-dev-server -D 安装完成之后需要配置一些信息使其可以自动打包编译 在package.json文件中配置:--open:项目启动后自动打开浏览器 --port 3000:设置项目端口 --contentBase src:项目在浏览器中默认打开的文件文字 --hot:热更新 { "scripts": { "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot" } } 配置完后则可以通过命令:npm run dev 启动项目 //接着我们还可以把html文件放入内存中,首先需要安装html-webpack-plugin工具 *安装方式:cnpm i html-webpack-plugin -D 安装完成之后需要在webpack.config.js中导入此工具 const htmlWebpackPlugin = require('html-webpack-plugin') 然后再配置其相关信息 //配置 module.exports = { plugins:[//配置插件的节点 new htmlWebpackPlugin({ //创建一个在内存中生成html页面的插件 template:path.join(__dirname,'./src/index.html'),//指定模板页面,将来会将此路径的页面在内存中去生成 filename:'index.html'//指定生成页面的名称 }) ] } //样式文件的引入,由于webpack默认只能打包处理Js类型的文件,无法处理其他非Js类型的文件,所以需要我们手动的去设置匹配规则 *安装第三方加载器:cnpm i style-loader css-loader -D 安装完成之后在main.js中用import方式引入css文件 import './css/index.css' 然后在webpack.config.js配置文件中进行配置: //配置 module.exports = { module:{//所有第三方模块加载器 rules:[//所有第三方模块的匹配规则,test表示正则的test()方法 {test:/\.css$/,use:['style-loader','css-loader']}//css文件的第三方loader规则 ] } }
原文地址:https://www.cnblogs.com/joelan0927/p/11042437.html
- 腾讯汇赢正式上线,变革2018大连房地产市场营销
- Windows下程序启动时出现0xc000007b错误的解决方案
- 外媒报道:CBM.com、NMA.com等域名齐交易
- ObjectDataSource与GridView配合使用经验总结系列一:数据绑定
- ObjectDataSource与GridView配合使用经验总结系列二:分页
- 网页优化系列二:使用Cache缓存静态文件、图片(asp.net版)
- Linux用户与“最小权限”原则
- WPF一步一脚印系列(1):万事起头难
- 自定义迭代器使用foreach
- 理解cookie的path和domain属性
- 静态页面设置缓存、动态页面设缓存(不断更新中。。。。)
- 区块链技术如何把你的游戏资产真正变为你的资产
- Python标准库07 信号 (signal包,部分os包)
- 当css属性width设为100%时
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法