webpack中webpack.config.js、package.json

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

webpack.config.js文件内容

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()//热加载插件
    ],

}

package.json文件内容

{
  "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

我本地没有index.html文件，所以输入文件链接

文件目录

成功链接