webpackTest
所属分类:JavaScript/JQuery
开发工具:JavaScript
文件大小:309KB
下载次数:2
上传日期:2017-11-15 14:15:40
上 传 者:
mjnlc
说明: webpack的学习代码,commonJS语言,IDEA开发平台
(learning code of webpack)
文件列表:
Scripts (0, 2017-11-10)
Scripts\typings (0, 2017-11-15)
Scripts\typings\angular-ui-router (0, 2017-11-10)
Scripts\typings\angular-ui-router\angular-ui-router.d.ts (18576, 2017-11-10)
Scripts\typings\angularjs (0, 2017-11-10)
Scripts\typings\angularjs\angular-animate.d.ts (12186, 2017-11-10)
Scripts\typings\angularjs\angular-cookies.d.ts (1782, 2017-11-10)
Scripts\typings\angularjs\angular-mocks.d.ts (14563, 2017-11-10)
Scripts\typings\angularjs\angular-resource.d.ts (7781, 2017-11-10)
Scripts\typings\angularjs\angular-route.d.ts (7569, 2017-11-10)
Scripts\typings\angularjs\angular-sanitize.d.ts (1562, 2017-11-10)
Scripts\typings\angularjs\angular.d.ts (82416, 2017-11-10)
Scripts\typings\custom.d.ts (80, 2017-11-15)
Scripts\typings\es6-promise (0, 2017-11-10)
Scripts\typings\es6-promise\es6-promise.d.ts (3484, 2017-11-10)
Scripts\typings\jasmine (0, 2017-11-10)
Scripts\typings\jasmine\jasmine.d.ts (17882, 2017-11-10)
Scripts\typings\jquery (0, 2017-11-10)
Scripts\typings\jquery\jquery.d.ts (152433, 2017-11-10)
Scripts\typings\karma-jasmine (0, 2017-11-10)
Scripts\typings\karma-jasmine\karma-jasmine.d.ts (447, 2017-11-10)
Scripts\typings\moment (0, 2017-11-10)
Scripts\typings\moment\moment-node.d.ts (22492, 2017-11-10)
Scripts\typings\moment\moment.d.ts (547, 2017-11-10)
src (0, 2017-11-15)
src\bundle.css (233, 2017-11-14)
src\bundle.css.map (245, 2017-11-14)
src\bundle.js (530, 2017-11-15)
src\bundle.js.map (248, 2017-11-15)
src\bundle.scss (193, 2017-11-14)
src\bundle.ts (330, 2017-11-15)
src\button-group (0, 2017-11-15)
src\button-group\button-group.css (1205, 2017-11-14)
src\button-group\button-group.css.map (886, 2017-11-14)
src\button-group\button-group.html (333, 2017-11-14)
src\button-group\button-group.js (3150, 2017-11-15)
src\button-group\button-group.js.map (2209, 2017-11-15)
src\button-group\button-group.scss (1366, 2017-11-14)
src\button-group\button-group.ts (2236, 2017-11-15)
src\global-variable.css (53, 2017-11-13)
... ...
#### npm使用淘宝源
``` bash
# npm config set registry http://www.npmjs.org
# npm info underscore
# tarball的值为:'http://registry.npm.taobao.org/underscore/download/underscore-1.8.3.tgz'说明切换成功
```
#### 安装webpack需执行的命令:
``` bash
#. npm install webpack -g
#. npm init -yes
#. npm install
```
#### 使用webStorm:
``` bash
#. file->settings->Languages & Frameworks->JavaScript->Libraries中添加node依赖
#. 由于暂时无法使用webpack直接编译sass,需要在webpack中配置SASS监听file->settings->tools->File-Watchers->添加SASS
```
#### 对CSS、SASS的支持
``` html
# 暂不支持直接import SASS文件,需要import编译后的css文件
import "./style.css"
# 在JS中直接引入第三方组件的CSS文件,无法支持
import "../node_modules/bootstrap/dist/css/bootstrap.css" //错误
import "bootstrap/dist/css/bootstrap.css" //正确
```
#### 编译过程
``` bash
# 安装依赖
npm install
# 启动热加载服务,访问地址http://localhost:9090,默认会调用src目录下的bundle.ts,以index.html作为模板
npm run start
# 在生产模式下构建项目,内容包括代码校验、压缩以及混淆,
npm run build
```
#### 生产模式
> 生产模式下会把所有的文件都打包到dist目录下,包括CSS、JS以及应用的相关图片,生成应用的绝对地址都会指向根目录,可通过webpack进行修改。./dist/demo.html可供演示使用
#### 使用的主要插件
1. [Webpack](https://doc.webpack-china.org/)
2. [extract-text-webpack-plugin](https://www.npmjs.com/package/extract-text-webpack-plugin)
3. [commons-chunk-plugin](https://doc.webpack-china.org/plugins/commons-chunk-plugin)
4. [open-browser-webpack-plugin](https://www.npmjs.com/package/open-browser-webpack-plugin)
5. [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin)
6. [clean-webpack-plugin](https://npm.taobao.org/package/clean-webpack-plugin)
近期下载者:
相关文件:
收藏者: