webpack中webpack.config.js、package.json

webpack中webpack.config.js、package.json文件

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require("path");
module.exports = {
devtool: 'eval-source-map',
entry:  {
Vue: __dirname + "/webpack/app/vue.pra.js",//已多次提及的唯一入口文件  这样可以有多个入口
Greeter: __dirname + "/webpack/app/Greeter.js",//已多次提及的唯一入口文件
},
// output: {
//     path: __dirname + "/webpack/public/js",//打包后的文件存放的地方
//     filename: "bundle.js"//打包后输出文件的文件名
// },
output: {
path: path.join(__dirname,"/webpack/build") ,
filename: "[name].bundle.js"
},
devServer: {
contentBase: path.join(__dirname, "/webpack/build"),//本地服务器所加载的页面所在的目录(终于实现了热加载)
historyApiFallback: true,//不跳转
inline: true,//实时刷新
hot: true
},

// webpack中配置Babel
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"es2015", "react"
],

}
},
exclude: /node_modules/
},
//解析VUE文件，vue最主要的就是用到了这个vue-loader，这才是解析vue文件的关键
//但是因为vue文件里面又包含有css和js，所以才用到了后面的几个loader
{
test: /\.vue$/,
use:{
loader: "vue-loader",

},

exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}
]
}
],
},
plugins: [
new HtmlWebpackPlugin({
template: __dirname + "/webpack/app/tmpl/vue.tmpl.html",//new 一个这个插件的实例，并传入相关的参数
filename:'vue.html',
inject:'body',
//    1、true或者body：所有JavaScript资源插入到body元素的底部
//    2、head: 所有JavaScript资源插入到head元素中
//    3、false： 所有静态资源css和JavaScript都不会注入到模板文件中
hash: true,
chunks:['Vue']

}),
new HtmlWebpackPlugin({
template: __dirname + "/webpack/app/tmpl/greeter.tmpl.html",//new 一个这个插件的实例，并传入相关的参数
filename:'greeter.html',
chunks:['Greeter']
}),
new webpack.HotModuleReplacementPlugin()//热加载插件
],

}

{
"name": "lianxi",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"script-name": "babel-node script.js",
"server": "webpack-dev-server --open  --hot"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.7",
"express": "^4.16.2",
"html-webpack-plugin": "^2.30.1",
"style-loader": "^0.19.0",
"vue": "^2.5.3",
"vue-hot-reload-api": "^2.2.4",
"vue-html-loader": "^1.2.4",
"vue-loader": "^13.5.0",
"vue-template-compiler": "^2.5.3",
"webpack": "^3.8.1",
"webpack-dev-middleware": "^1.12.0",
"webpack-dev-server": "^2.9.4",
"webpack-hot-middleware": "^2.20.0"
}
}

npm run server

文件目录

成功链接