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)

近期下载者

相关文件


收藏者