1. Basic configuration
When webpack is executed, in addition to passing parameters on the command line, it can also be executed through the specified configuration file. By default, webpack.config.js in the current directory will be searched. This file is a node.js module that returns a configuration object in json format, or specifies a configuration file with the --config option.
//Create webpack.config.js
var webpack = require('webpack');
module.exports = {
entry:'./entry.js', //entry file
output:{
//The __dirname variable in node.js gets the full absolute path of the directory where the current module file is located
path:__dirname, //output location
filename:'build.js' //input file
},
module:{
loaders:[
{
test:/\.css$/,//regular support
loader:'style-loader!css-loader'
}
]
},
//Other solution configuration
resolve: {
extensions: ['', '.js', '.json', '.css', '.scss']//The file corresponding to the suffix added here can omit the suffix
},
//plugin
plugins:[
new webpack.BannerPlugin('This file is created by ly')
]
}
//entry.js introduces the css module:
require('./style.css');
::run
webpack
2. plugins plugin
You can install third-party plug-ins through npm, such as: BannerPlugin is used to add comment information to the header of the output file.
3. Development environment
::Compile output with progress and color
webpack --progress --colors
::Start listening mode (modules that have not changed will be cached in large memory after compilation, and will not be recompiled every time)
webpack --watch
webpack -w
:: Use the development service (it will start an express static resource web server at localhost:8080. And start the listening mode automatic webpack, open http://localhost:8080/ in the browser, you can browse the project page, and pass a socket .io service monitors changes in real time and automatically refreshes the page)
npm install webpack-dev-server -g
4. Start webpack-dev-server
Note: After starting webpack-dev-server, the compiled files are not output to the output output destination folder configured in webpack.config.js, but the real-time compiled files are stored in memory.
example:
//Directory Structure
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
也是自动便也打包刷新