웹팩 입문 학습4-browser(브라우저 자동 실행)

디렉터리와 입구, 출구,loader 설정, 전에 배웠습니다. 웹팩에서config.js 설정은 브라우저를 자동으로 실행합니다.브라우저를 자동으로 실행하려면 오픈-browser-webpack-plugin 플러그인을 사용하십시오.그리고 웹팩에서.config.js를 설정합니다. 코드는 다음과 같습니다.

var webpack = require("webpack");
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
var WebpackDevServer = require('webpack-dev-server');
module.exports = {
    entry: [
        "webpack-dev-server/client?http://localhost:8080/",
        "./src/index.js"
    ],
    output: {
        path: __dirname + "/dist/",
        filename: "bundle.js"
    },
    devServer:{
        historyApiFallback:true,
        hot:true,
        inline:true,
        //progress:true,//      ，         
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new OpenBrowserPlugin(
            { 
                url: 'http://localhost:8080' 
            }
        ),
        new webpack.ProvidePlugin({
            $: 'jquery'
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                loader: "style-loader!css-loader",
            },
            {
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /node_modules/,
                options: {
                    "presets": ["latest"]
                }
            }
        ]
    }/*,
    externals: {
        jquery: "window.$"
    }*/
}

package.json도 상응하는 설정을 해서scripts에 코드를 한 줄 추가해야 한다

"start": "webpack-dev-server --hot --inline"

전체 코드는 다음과 같습니다.

{
  "name": "meixi",
  "version": "1.0.0",
  "description": "             ",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --hot --inline"
  },
  "author": "xiao",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-latest": "^6.24.1",
    "html-webpack-plugin": "^2.28.0",
    "open-browser-webpack-plugin": "0.0.5",
    "webpack": "^2.5.1",
    "webpack-dev-server": "^2.4.5"
  }
}

구성이 끝나면 됩니다.

npm start

index.html 파일은 브라우저에서 자동으로 열리지만 몇 가지 문제가 있습니다 서버 웹팩-dev-server를 설치해야 합니다 구체적인 설치점에 들어가면 알 수 있습니다