1.运行命令npm install安装依赖包
2.运行命令npm i -g webpack-dev-server 安装服务插件
3.运行命令webpack-dev-server启动服务
4.打开浏览器,输入http://127.0.0.1:8080/
5.运行命令webpack,生成编译后的js文件。
`
依赖包文件package.json
{
"name": "webpack-demos",
"version": "1.0.0",
"description": "a collection of simple demos of Webpack",
"main": "index.js",
"keywords": [
"build",
"demo",
"webpack"
],
"author": "Will",
"license": "MIT",
"dependencies": {
"babel-core": "~6.0.20",
"babel-loader": "~6.0.1",
"babel-preset-es2015": "~6.0.15",
"babel-preset-react": "~6.0.15",
"bundle-loader": "^0.5.4",
"css-loader": "~0.16.0",
"file-loader": "~0.8.4",
"history": "^1.17.0",
"html-webpack-plugin": "2.x",
"jquery": "~2.1.4",
"jsx-loader": "~0.13.2",
"open-browser-webpack-plugin": "0.0.1",
"react": "~0.14.2",
"react-dom": "~0.14.2",
"react-router": "2.x",
"style-loader": "~0.12.3",
"url-loader": "~0.5.6",
"webpack": "~1.13.0",
"webpack-dev-server": "^1.14.0"
}
}
webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: [
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080',
'./index.js'
],
output: {
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [
{test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {presets: ['es2015', 'react']},
include: path.join(__dirname, '.')},
{test: /\.less$/, loader: 'style!css!less' }
]
}
};