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 ...
随机推荐
- The Ultimate Guide To iPhone Resolutions
备忘:http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutionshttp://appicontemplate.com/
- 用了一天的时间，linux下expect实现ssh自动登录服务器记，鄙视下网上各种抄来抄去残段子
因为要对客户方的快30个项目进行特别有顺序的重启,所以不得不想办法写个脚本,网上看了不少段子.真是残缺的可以.没有一段是可以正常运行的.我来按顺序记录一下 脚本的本身 使用expect实现自动登录的脚 ...
- 如何查看Android设备上的分区信息
Android设备上,一般都会存在一块eMMC存储芯片来存放系统和用户数据,甚至部分的引导程序. 一般设备出厂时,各个厂商都会将这块存储芯片分成很多的分区,每个分区内存放不同的内容.具体分区的布局每个 ...
- Android初级教程XUtils实现“断点续传”下载
对于"断电续传",在任何开发中都显得很重要.xutils对此封装的很好了,可以很简单的实现很多下载功能,其中就包括"断点续传" 主要代码如下: package ...
- 【一天一道LeetCode】#191. Number of 1 Bits
一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Write a ...
- Android进阶(二十四)Android UI---界面开发推荐颜色
Android UI---界面开发推荐颜色 在Android开发过程中,总要给app添加一些背景,个人认为使用纯色调便可以达到优雅的视觉效果. 补充一些常用的颜色值:colors.xml < ...
- XStream
1.引入需要的jar包,在pom.xml中配置依赖 <dependency> <groupId>com.thoughtworks.xstream</groupId& ...
- Oracle开发环境搭建
一.软件准备 地址:oracle官网 安装包:因为个人学习用,所以就安装服务器端就可以了,不需要客户端. 一共两个压缩文件,解压时一起解压到到一个文件夹. 本人使用的:win32_11gR2_data ...
- C++ Primer 有感（命名空间）
1.命名空间定义以关键字namespace开始,后接命名空间的名字. 2.命名空间可以在全局作用域或其他作用域内部定义,但不能在函数或类内部定义. 3.定义在命名空间中的实体称为命名空间的成员.像任意 ...
- 类装载器DexClassLoader （android内核剖析）
在java环境中,有个概念叫做"类装载器",其作用是动态装载Class文件.标准的java SDK中有一个ClassLoader类,借助它可以装载 想要的Class文件,每个Cla ...
