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 ...
随机推荐
- 【移动开发】自定义ProgressBar
<ProgressBar android:layout_centerInParent="true" android:layout_width="30dp" ...
- Centos6.6上源码安装Nodejs V4版本
本来就是想在vps上装一个Ghost博客,这个博客依赖的是Nodejs,然后推荐的是V4版本.然后我就对着官网的步骤安装,发现根本没有Centos6 i386的资源了(64位的还是有的), 我只能在那 ...
- TCP/IP入门(4) --应用层
/** 本篇博客由汗青ZJF整理并发布, 转载请注明出处: http://blog.csdn.net/zjf280441589/article/category/1854365 */ TCP/IP中的 ...
- CCDrawNode类的引用
CCDrawNode Class Reference Inherits from CCNode : CCResponder : NSObject Declared in CCDrawNode.h 总览 ...
- HTML5 Web Storage 特性
原文地址: Using HTML5 Web Storage 原文日期: 2010年06月28日 翻译日期: 2013年08月12日 当下Web开发领域最火爆的词语当属 HTML5.HTML5标准的新特 ...
- EXCEPTION与ERROR的区别
EXCEPTION与ERROR的区别
- PA 项目创建任务
---- 创建任务 DECLARE p_project_id NUMBER := 155233; p_task_number VARCHAR2(240) := 'CXYTEST0001'; p_tas ...
- Linux进程－进程的创建
今天学习了Linux的进程创建的基本原理,是基于0.11版本核心的.下面对其作一下简单的总结. 一.Linux进程在内存中的相关资源 很容易理解,Linux进程的创建过程就是内存中进程相关资源产生 ...
- 视音频编解码学习工程：H.264分析器
=====================================================视音频编解码学习工程系列文章列表: 视音频编解码学习工程:H.264分析器 视音频编解码学习工 ...
- python爬虫 - python requests网络请求简洁之道
http://blog.csdn.net/pipisorry/article/details/48086195 requests简介 requests是一个很实用的Python HTTP客户端库,编写 ...
