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. mysql varchar和char的根本区别深度详解

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt337 VARCHAR 和 CHAR 是两种最主要的字符串类型 .不幸的是,很 ...

  2. Spring 设置readonly 事务只读模式

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt394 在学习spring事务的时候,发现设置readOnly后不启作用. 查 ...

  3. 西门子 PLC SFC14/15 80B1故障

    SFC14/15 S7-300/400/1500 PLC中,SFC14/15用于将分站的IO数据批量读取到DB块中.MOVE(L T)指令只能最多传送4byte.因此,使用SFC14/15能够简化程序 ...

  4. 201521123064 《Java程序设计》第4周学习总结

    1. 本章学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. ① 以上周PTA实验"形状"为例,Circle类和Rectangle类中 ...

  5. 三分钟深入TT猫之故障转移

    结束了一周繁忙的工作,趁着周末,小编手中的键盘早已饥渴难耐了,想知道上期省略号中发生了什么有趣的故事么?且听小编娓娓道来,结尾有彩蛋. 目录 风月前场 梦回现实 模拟老鸨 会话机制 故障转移 总结 风 ...

  6. Day-17: 网络编程

    ---恢复内容开始--- 现有的互联网通讯方式,是服务器端的进程与客户端进程的通信.Python中进行网络编程,就是在Python程序本身这个进程内,连接别的服务器进程的通信端口进行通信. 互联网协议 ...

  7. Spring第二篇【Core模块之快速入门、bean创建细节、创建对象】

    前言 上篇Spring博文主要引出了为啥我们需要使用Spring框架,以及大致了解了Spring是分为六大模块的-.本博文主要讲解Spring的core模块! 搭建配置环境 引入jar包 本博文主要是 ...

  8. 接口测试入门(4)--接口自动化测试框架 / list和map用法 / 随机选取新闻 (随机数生成) / 接口相关id映射

    一.接口自动化测试框架 为了更好的组织测试方法,测试用例并且持续集成,我们选择了  java+testNG(测试用例组织)+gitlab(代码版本管理)+Jenkins(持续集成工具) 作为一整套的自 ...

  9. mariadb自带命令行客户端指令笔记

    mysql -H 主机IP -u 用户名 -p -p表示要输密码,不要直接输了,要回车后在程序里输入 显示数据库列表: show databases; 选择XX数据库: use XX; 显示数据库里的 ...

  10. 庞玉栋:浅谈seo优化对于网站建设的重要性

    根据最近做SEO优化经验而写  写的也都是我的方法 大神勿喷 SEO:英文Search Engine Optimization缩写而来, 中文意译为搜索引擎优化 如果你连个网站都没有那就点这里:如何拥 ...