1、最简单的webpack实例
2018-01-09 16:34
387 查看
0.1、安装webpack
首先你需要安装Node.js,点击打开Node.js下载页面。安装完Node.js后,会自带npm包管理器。
这个命令将安装最新版本的webpack(全局)
0.2、查看当前webpack版本
执行命令:
以下执行webpack命令时,指在对应文件夹下,通过控制台执行命令。
快速抵达对应目录的控制台(win):
在对应目录下,按住 shift,然后点击鼠标右键,在弹窗里选择在此处打开命令窗口即可启用
0.3、把hello.js文件打包为hello.bundle.js
hello.js里面也可以有css和其他的js
0.4、导入了css打包的时候得指定文件类型才能打
0.5,频繁修改文件频繁打包很麻烦,用下面命令打包修改代码就不用打包了
优点,index页面只需要引入一个文件即可
注意要点
第一,安装的时候先要全局安装webpack 就是加上-g。
第二,文件名字不能重复webpack名字。
第三,windown下 更改”css=style-loader!css-loader!” 是双引号
首先你需要安装Node.js,点击打开Node.js下载页面。安装完Node.js后,会自带npm包管理器。
npm install webpack -g
这个命令将安装最新版本的webpack(全局)
webpack -v
0.2、查看当前webpack版本
执行命令:
以下执行webpack命令时,指在对应文件夹下,通过控制台执行命令。
快速抵达对应目录的控制台(win):
在对应目录下,按住 shift,然后点击鼠标右键,在弹窗里选择在此处打开命令窗口即可启用
webpack hello.js hello.bundle.js
0.3、把hello.js文件打包为hello.bundle.js
hello.js里面也可以有css和其他的js
0.4、导入了css打包的时候得指定文件类型才能打
webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader"
0.5,频繁修改文件频繁打包很麻烦,用下面命令打包修改代码就不用打包了
webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --watch
代码
index页面效果图
优点,index页面只需要引入一个文件即可
注意要点
第一,安装的时候先要全局安装webpack 就是加上-g。
第二,文件名字不能重复webpack名字。
第三,windown下 更改”css=style-loader!css-loader!” 是双引号
相关文章推荐
- webpack+Vue.js+vue-router的一个简单实例应用
- webpack+vue+vueRouter+es6 构建的简单实例项目
- vue+vueRouter+webpack的简单实例
- vue+webpack+vue-router+vuex+vue-resource简单实例
- 详解webpack 配合babel 将es6转成es5 超简单实例
- webpack4简单入门实例
- [WEB开发] 基于XMLHTTP的简单实例
- Java WebService 简单入门实例
- webpack与gulp的区别及实例搭建
- html5 使用web SQL database简单实例
- 简单易懂的webpack入门
- webpack 2的react开发配置实例代码
- vue最简单的入门教程+实战+Vue2+VueRouter2+webpack(四)
- webpack+vue+express(hot)热启动调试简单配置方法
- react+webpack简单小例子
- Java WebService 简单实例
- 用Java 开发 WebService Axis简单实例
- Java WebService 简单实例
- 使用webpack快速搭建最简单ES6环境
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&构建使用jquery来实现