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');
運行
webpack
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
也是自動便也打包刷新