webpack2使用ch1-目录说明
1 目录解释
webpack.config.js:配置文件,配置文件可以改成其他名,但package.json --config文件名称也要对应修改
2 webpack.config.js
//webpack 配置文件
const webpack = require('webpack'),
path = require('path'); //导出模块 common.js语法
module.exports = {
entry: './src/script/main.js', //打包入口
output: { //输出
path: path.resolve(__dirname, './dist/js'),
filename: 'bundle.js' //打包后的文件名
}
};
3 package.json
"scripts"里面配置了一个快捷键 “webpack” 值是这个快捷键的操作
运行 $ cnpm run webpack
4 运行后 ./dist/js/bundle.js 生成这个文件
5 css样式使用说明
5.1 安装依赖模块
5.2 页面载入.css文件
5.3 命令加载对.css文件的处理
或使用 require("style-loader!css-loader!./src/css/sytyle.css") 此时的命令就是:webpack hello.js hello.bundle.js
6--watch 表示监听文件修改,文件修改后自动更新,自动打包
--progress 可以看到打包的过程
--display-modules 查看打包的模块
--display-reasons 打包这些模块的原因解释
webpack2使用ch1-目录说明的更多相关文章
- ch1:python3 查看版本号、安装目录和工作空间目录
查看python版本: 每次打开python顶端会显示版本号 在程序中判断版本号可以通过import sys sys.version 在dos下可以通过python -V查看 安装目录:C:\Pyt ...
- vuejs2+webpack2+vuxui2多页面架手脚,支持二级目录
const UglifyJsPlugin = require('uglifyjs-webpack-plugin') // 去console插件 const CompressionWebpackPlug ...
- RMAN_学习笔记5_RMAN Catalog Script恢复目录脚本
2014-12-24 Created By BaoXinjian
- RMAN_学习笔记3_RMAN Catalog恢复目录
2014-12-23 Created By BaoXinjian
- omi-cli新版发布-升级webpack2和支持sass生成组件局部CSS
写在前面 omi-cli是Omi的命令行工具.在v0.1.X以及之前版本中,生成出来的项目脚手架 是基于webpack1的.由于: webpack1不支持tree-shaking,webpack2 支 ...
- webpack2.x基础属性讲解(一)
webpack作为构建工具平时作为前端作为优化.模块编程.和分片打包的重要组成部分,大家可能并不陌生,如果没有时刻的去关注文档,那么大家可能不太清楚webpack已经默默然的升级到2.x了,对比1 ...
- 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍
webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...
- 简单vue项目脚手架(vue+webpack2.0+vuex+vue-router)
github地址 使用技术栈 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1) vue-router(^2.5.3 ...
- webpack2归纳总结
本文github仓库:https://github.com/Rynxiao/webpack2-learn 从v1迁移到v2 1. 配置类型 在webpack1的时候,主要是通过导出单个object来进 ...
- webpack2 项目
webpack2 项目 实例gif图: 目录截图: 目录介绍: dist目录(最后生成的目录,里面文件为配置webpack自动生成的): c/:css文件夹; i/:img文件夹; j/:js文件 ...
随机推荐
- FTP的主动和被动模式详解
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp25 主动模式FTP与被动模式FTP该如何选择 一.主动模式的实现与特点. ...
- Project 4:Longest Ordered Subsequence
Problem description A numeric sequence of ai is ordered if a1 < a2 < - < aN. Let the subseq ...
- 【ctrl+A】与【ctrl+单击图层缩略图】有什么区别?
如果这图层没有透明区域的话那和ctrl+A的效果是一样的! 但如果图层有不透明区域,那选中的就是图层中所有不透明的区域!
- 团队作业8----第二次项目冲刺(Beta阶段) 第一天
BETA阶段冲刺第一天 1.开了个小会议 2.每个人的工作 (1) 昨天已完成的工作: 今天是第一天,所以是新的开始. (2) 今天计划完成的工作: (3) 工作中遇到的困难: 由于有新的成员加入,默 ...
- [2017BUAA软工助教]第0次个人作业
学习别人的经验和体会 零.前言 我认为人生就是一次次地从<存在>到<光明>. 一.软件工程师的成长 0.这是一个博客索引 同学们在上这门课的时候基本都是大三,觉得在大学里,到教 ...
- 201521123110 《Java程序设计》第7周学习总结
1. 本章学习总结 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 public boolean contains(Object o) { re ...
- 201521123113《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 1.2 可选:使用常规方法总结其他上课内容. 使用NetB ...
- 201521123063 《Java程序设计》第13周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 网络通讯的两种方式 TCP方式:类似于打电话,能够建立专门的虚拟连接,数据传输可靠 UDP方式:类似与发短 ...
- Hyperledger Fabric 1.0 从零开始(四)——Fabric源码及镜像文件处理
2:Fabric源码及镜像文件处理 2.1下载Fabric源码 下载Fabric源码是因为要用到源码中提到的列子和工具,工具编译需要用到go语言环境,因此需要把源码目录放到$GOPATH下.通过1.3 ...
- Python数据分析numpy库
1.简介 Numpy库是进行数据分析的基础库,panda库就是基于Numpy库的,在计算多维数组与大型数组方面使用最广,还提供多个函数操作起来效率也高 2.Numpy库的安装 linux(Ubuntu ...