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-目录说明的更多相关文章

  1. ch1:python3 查看版本号、安装目录和工作空间目录

    查看python版本: 每次打开python顶端会显示版本号 在程序中判断版本号可以通过import sys  sys.version 在dos下可以通过python -V查看 安装目录:C:\Pyt ...

  2. vuejs2+webpack2+vuxui2多页面架手脚,支持二级目录

    const UglifyJsPlugin = require('uglifyjs-webpack-plugin') // 去console插件 const CompressionWebpackPlug ...

  3. RMAN_学习笔记5_RMAN Catalog Script恢复目录脚本

    2014-12-24 Created By BaoXinjian

  4. RMAN_学习笔记3_RMAN Catalog恢复目录

    2014-12-23 Created By BaoXinjian

  5. omi-cli新版发布-升级webpack2和支持sass生成组件局部CSS

    写在前面 omi-cli是Omi的命令行工具.在v0.1.X以及之前版本中,生成出来的项目脚手架 是基于webpack1的.由于: webpack1不支持tree-shaking,webpack2 支 ...

  6. webpack2.x基础属性讲解(一)

      webpack作为构建工具平时作为前端作为优化.模块编程.和分片打包的重要组成部分,大家可能并不陌生,如果没有时刻的去关注文档,那么大家可能不太清楚webpack已经默默然的升级到2.x了,对比1 ...

  7. 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍

    webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...

  8. 简单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 ...

  9. webpack2归纳总结

    本文github仓库:https://github.com/Rynxiao/webpack2-learn 从v1迁移到v2 1. 配置类型 在webpack1的时候,主要是通过导出单个object来进 ...

  10. webpack2 项目

    webpack2 项目   实例gif图: 目录截图: 目录介绍: dist目录(最后生成的目录,里面文件为配置webpack自动生成的): c/:css文件夹; i/:img文件夹; j/:js文件 ...

随机推荐

  1. FTP的主动和被动模式详解

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp25 主动模式FTP与被动模式FTP该如何选择 一.主动模式的实现与特点. ...

  2. Project 4:Longest Ordered Subsequence

    Problem description A numeric sequence of ai is ordered if a1 < a2 < - < aN. Let the subseq ...

  3. 【ctrl+A】与【ctrl+单击图层缩略图】有什么区别?

    如果这图层没有透明区域的话那和ctrl+A的效果是一样的! 但如果图层有不透明区域,那选中的就是图层中所有不透明的区域!

  4. 团队作业8----第二次项目冲刺(Beta阶段) 第一天

    BETA阶段冲刺第一天 1.开了个小会议 2.每个人的工作 (1) 昨天已完成的工作: 今天是第一天,所以是新的开始. (2) 今天计划完成的工作: (3) 工作中遇到的困难: 由于有新的成员加入,默 ...

  5. [2017BUAA软工助教]第0次个人作业

    学习别人的经验和体会 零.前言 我认为人生就是一次次地从<存在>到<光明>. 一.软件工程师的成长 0.这是一个博客索引 同学们在上这门课的时候基本都是大三,觉得在大学里,到教 ...

  6. 201521123110 《Java程序设计》第7周学习总结

    1. 本章学习总结 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 public boolean contains(Object o) { re ...

  7. 201521123113《Java程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 1.2 可选:使用常规方法总结其他上课内容. 使用NetB ...

  8. 201521123063 《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 网络通讯的两种方式 TCP方式:类似于打电话,能够建立专门的虚拟连接,数据传输可靠 UDP方式:类似与发短 ...

  9. Hyperledger Fabric 1.0 从零开始(四)——Fabric源码及镜像文件处理

    2:Fabric源码及镜像文件处理 2.1下载Fabric源码 下载Fabric源码是因为要用到源码中提到的列子和工具,工具编译需要用到go语言环境,因此需要把源码目录放到$GOPATH下.通过1.3 ...

  10. Python数据分析numpy库

    1.简介 Numpy库是进行数据分析的基础库,panda库就是基于Numpy库的,在计算多维数组与大型数组方面使用最广,还提供多个函数操作起来效率也高 2.Numpy库的安装 linux(Ubuntu ...