1、基本配置
webpack在执行时，除在命令行传入参数，还可以通过指定的配置文件来执行。默认会搜索当前目录下webpack.config.js。这个文件是一个node.js模块，返回一个json格式的配置对象，或者通过--config选项来指定配置文件。
//创建webpack.config.js
var webpack = require('webpack');
module.exports = {
entry:'./entry.js', //入口文件
output:{
//node.js中__dirname变量获取当前模块文件所在目录的完整绝对路径
path:__dirname, //输出位置
filename:'build.js' //输入文件
},
module:{
loaders:[
{
test:/\.css$/,//支持正则
loader:'style-loader!css-loader'
}
]
},
//其他解决方案配置
resolve: {
extensions: ['', '.js', '.json', '.css', '.scss']//添加在此的后缀所对应的文件可以省略后缀
},
//插件
plugins:[
new webpack.BannerPlugin('This file is created by ly')
]
}
//entry.js中引入css模块：
require('./style.css');
2、plugins 插件
可以通过npm安装第三方插件，如：BannerPlugin的作用是给输出的文件头部添加注释信息。
3、开发环境
::编译输出内容带进度和颜色
webpack --progress --colors
::启动监听模式（没有变化的模块会在编译后缓存大内存中，不会每次都被重新编译）
webpack --watch
webpack -w
::使用开发服务（它将在localhost:8080启动一个express静态资源web服务器。并启动监听模式自动webpack，在浏览器打开http://localhost:8080/，就可以浏览项目页面，并通过一个socket.io服务实时监听变化并自动刷新页面）
npm install webpack-dev-server -g
4、启动webpack-dev-server
注意：在启动了webpack-dev-server后，编译后的文件并没有输出到webpack.config.js中配置的output输出目标文件夹中，而是将实时编译后的文件保存在内存中。
例子：
//目录结构
myapp
|__dist
| |__styles
| |__js
| |__bundle.js
| |__index.html
|__src
| |__component
| |__index.js
|__node_modules
|__package.json
|__webpack.config.js
//webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry:'./src/index.js',
output:{
path:path.resolve(__dirname, './dist/'),
filename:'build.js'
},
//设置开发者工具的端口号,不设置则默认为8080端口
devServer: {
inline: true,
port: 8181
},
module:{
loaders:[
{
test:/\.js?$/,
exclude:/node_modules/,
loader:'babel-loader',
query:{
presets:['es2015','react']
}
},
{
test:/\.css$/,
loader:'style-loader!css-loader'
}
]
}
};
//package.json
{
"name": "myapp",
"version": "1.0.0",
"description": "",
"main": "build.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --devtool eval-source-map --progress --colors --hot --inline --content-base ./dist",
"build": "webpack --progress --colors"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.4.0",
"babel-preset-es2015": "^6.22.0",
"jsx-loader": "^0.13.2",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
},
"dependencies": {
"jquery": "^3.1.1"
}
}
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<div id="app"></div>
<script src="build.js"></script>
</body>
</html>
::安装所有依赖
npm install
::运行
npm run dev
最后在浏览器中打开：http://localhost:8181/index.html
详解package.json中命令：
webpack-dev-server //启动webpack-dev-server
--progress --colors //打包进行显示颜色
--hot //开启模块热修复功能
--content-base ./dist //设置webpack-dev-server运行的根目录是 ./dist
--inline //使用inline的方式进行页面自动刷新
--quiet //控制台中不输出打包信息
--compress //开启gzip压缩
webpack-dev-server支持两种自动刷新的方式：
①Iframe mode
在网页中嵌套一个iframe，将自己的应用注入都这个iframe中，每次文件修改后都是这个iframe进行了reload
②inline mode
也是自动便也打包刷新
- Webpack探索【2】--- 安装、项目初始化、webpack.config.js配置文件
本文主要讲安装.项目初始化.webpack.config.js配置文件方面的内容.
- webpack前端构建工具学习总结（三）之webpack.config.js配置文件
Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行.默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一 ...
- react webpack.config.js 入门学习
在学习react 的时候必然会用到webpack打包工具,webpack的快速入门另外一篇文章中有记录,这里只记录webpack.config.js文件,因为每个项目下都必须配置,通俗的讲,它的作用就 ...
- webpack配置：less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件
一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...
- webpack.config.js配置入口出口文件
目录结构: 新建webpack.config.js配置文件 const path = require('path') //导出 path是node内置的包 通过npm init初始化得到package ...
- webpack 4.0 配置文件 webpack.config.js文件的放置位置
一般webpack.config.js是默认放在根目录的,不在根目录的时候需要在package.json中制定位置,我的配置文件目录是config/webpack.config.js,在package ...
- webpack的配置文件[webpack.config.js]
如果项目里没有webpack.config.js这个文件,webpack会使用它本身内置在源码里的配置项. webpack.config.js这个配置名称可以通过指令修改 npx webpack -- ...
- [js高手之路]深入浅出webpack系列2-配置文件webpack.config.js详解
接着上文,重新在webpack文件夹下面新建一个项目文件夹demo2,然后用npm init --yes初始化项目的package.json配置文件,然后安装webpack( npm install ...
- [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
随机推荐
- 开源项目——小Q聊天机器人V1.5
小Q聊天机器人V1.0 http://blog.csdn.net/baiyuliang2013/article/details/51386281 小Q聊天机器人V1.1 http://blog.csd ...
- Qt中事件分发源代码剖析
Qt中事件分发源代码剖析 Qt中事件传递顺序: 在一个应该程序中,会进入一个事件循环,接受系统产生的事件,并且进行分发,这些都是在exec中进行的. 下面举例说明: 1)首先看看下面一段示例代码: i ...
- UNIX网络编程——关于socket阻塞与非阻塞情况下的recv、send、read、write返回值
1.阻塞模式与非阻塞模式下recv的返回值各代表什么意思?有没有 区别?(就我目前了解阻塞与非阻塞recv返回值没有区分,都是 <0:出错,=0:连接关闭,>0接收到数据大小,特别:返回 ...
- UNIX网络编程——shutdown 与 close 函数 的区别
假设server和client 已经建立了连接,server调用了close, 发送FIN 段给client(其实不一定会发送FIN段,后面再说),此时server不能再通过socket发送和接收数据 ...
- Android初级教程理论知识（第三章测试&数据存储&界面展现）
首先介绍单元测试,我在javaweb部分有详细介绍单元测试框架的一篇文章. 可以先看在javaweb中的单元测试详解篇http://blog.csdn.net/qq_32059827/article/ ...
- 程序员修炼之道中所有tips总结
1 关心你的技艺 如果你不在乎能否漂亮地开发出软件,你又为何要耗费生命去开发软件呢? 2 思考!你的工作 关掉自动驾驶仪,接管操作.不断地批评和评估你的工作. 3 ...
- Mybatis源码分析之结果封装ResultSetHandler和DefaultResultSetHandler
ResultSetHandler负责处理两件事: (1)处理Statement执行后产生的结果集,生成结果列表 (2)处理存储过程执行后的输出参数ResultSetHandler是一个接口,提供了两个 ...
- 记一个SwipeMenuListView侧滑删除错乱的Bug
做侧滑删除网上有很多方案,比如重写Listview实现滑动的监听,今天说下一个SwipeListView,这个是之前一个朋友在网上开源的一个封装组件,能够适用于多种情况,项目地址:https://gi ...
- React Native入门教程 3 -- Flex布局
上一篇文章中介绍了基本组件的使用 React Native入门教程(笔记) 2 – 基本组件使用及样式 本节内容将继续沿用facebook官方例子介绍如何使用Flexbox布局把界面设计的多样化. 转 ...
- java单链表常用操作
总结提高,与君共勉 概述. 数据结构与算法亘古不变的主题,链表也是面试常考的问题,特别是手写代码常常出现,将从以下方面做个小结 [链表个数] [反转链表-循环] [反转链表-递归] [查找链表倒数第K ...
