[js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数
[js高手之路]深入浅出webpack教程系列索引目录:
- [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数
- [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)
- [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
- [js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)
- [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
- [js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法
- [js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法
- [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
webpack,我想大家应该都知道或者听过,Webpack是前端一个工具,可以让各个模块进行加载,预处理,再进行打包。现代的前端开发很多环境都依赖webpack构建,比如vue官方就推荐使用webpack.废话不多说,我们赶紧开始吧.
第一步、安装webpack
新建文件夹webpack->再在webpack下面新建demo->命令行切换到demo目录,使用npm init --yes 初始化项目的package.json文件,然后执行npm install webpack --save-dev
第二步、全局安装webpack(3.5.6版本): npm install webpack@3.5.6 -g 安装完成之后用webpack -v 查看webpack的版本
第三步、新建一个index.js文件,输入一个函数,弹出一些信息,然后调用函数,最后用webpack 打包( webpack index.js index.bundle.js ):把index.js文件打包成index.bundle.js
就会在当前的目录下面生成index.bundle.js文件.
第四步、新建一个index.html文件,然后引入index.bundle.js 就能使用这个js文件了
第五步、把两个js文件一起打包合并
另外在当前目录下面新建一个calc.js文件,然后在用module.exports导出
然后在index.js文件中用var oCalc = require( './calc.js' )引入calc.js, 在调用函数oCalc.add( 10, 20 ), 那现在就有了两个函数在index.js中了, 再次执行命令
webpack index.js index.bundle.js, 合并打包之后, 重新刷新下index.html,是不是弹出了add函数的结果呢?
第六步、loader的使用
在当前目录下新建style.css文件,然后用require引入index.js文件中, 执行一次打包(webpack index.js index.bundle.js),这个时候会报错,报错信息显示为(你需要loader去处理css文件).
第七步、安装与使用loader
我们需要安装两个loader,css-loader,style-loader( 安装命令: npm install css-loader style-loader --save-dev ), 再用require加载
再次执行一次打包( webpack index.js index.bundle.js ),然后刷新index.html文件, 看看是否css文件中的body{ background: red } 生效了呢(浏览器body的背景变红)?
第八步、更详细的打包信息
webpack打包,后面可以跟很多参数,如:
--progress: 打包进度
--display-modules: 打包的模块
--colors: 是否彩色显示 打包提示信息
--display-reasons: 打包原因
--watch: 自动监控文件变化
等等,还有很多,可以参考官网
后面还有插件,配置等等很多项目开发中的常见的知识额
相关文章
- [Node.js] 入坑
- Linux环境下Node.js的安装配置
- 一点感悟:《Node.js学习笔记》star数突破1000+
- 1 时间戳 2 C# 如何生成一个时间戳 3 js 时间加一分钟... 4 js string->date 5 js 取得当天0点 / 23:59:59 时间
- Html Table用JS导出excel格式问题 导出EXCEL后单元格里的000412341234会变成412341234 7-14 会变成 2018-7-14(7月14) 自定义格式 web利用table表格生成excel格式问题 js导出excel增加表头、mso-number-format定义数据格式 数字输出格式转换 mso-number-format:"@"
- h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片
- js_html_input中autocomplete="off"在chrom中失效的解决办法 使用JS模拟锚点跳转 js如何获取url参数 C#模拟httpwebrequest请求_向服务器模拟cookie发送 实习期学到的技术(一) LinqPad的变量比较功能 ASP.NET EF 使用LinqPad 快速学习Linq
- 【JS】axios框架
- JS基础 DOM
- 柏林纪行(中):Node.js Collaboration Summit
- 在Ubuntu下安装Node.JS的不同方式
- JS--Object、 Set、Map
- CentOS 6.6 安装 Node.js
- 【HarmonyOS】【JS】 鸿蒙js开发使用div自带的scroll,滑动条拉不到最下面?
- js导出
- 用java的眼光看js的oop
- windows环境下安装nvm、node.js、npm步骤
- sublime text 3安装html-css-js prettify后使用时报错An unhandled OS error was encountered
- 浅谈JS递归
- css/js 实现单行/多行省略
- JS对象详解
- 在CentOS 7上安装Node.js的4种方法(yum安装和源码安装)
- JS 将数字字符串数组转为 数字数组 (互换),js获取数组对象中 某一个key的值,js判断一个数组是否包含另一个数组(一维数组)
- JS按位非(~)运算符与~~运算符的理解分析
- js判断移动端是否安装某软软件,安装直接打开相应的链接,否则跳转到下载商店方法
- js判断是否安装flash player及当前版本 和 检查flash版本是否需要升级
- D3.js系列——元素操作和简单画布操作
- js unicode处理
- JS ES6中export和import详解
- js-原生Js汉语拼音首字母匹配城市名
- three.js 离线API