webpack项目基本运行环境配置

1.在安装了node的前提下，终端运行
//全局安装cnpm，安装其它包速度更快

npm i cnpm -g

2.项目根目录下新建src和dist文件夹,在src下新建index.html和index.js
全局安装webpack和webpack-cli

cnpm i webpack webpack-cli -g

3.配置webpack
在根目录下新建webpack.config.js，运行webpack打包，在dist文件夹下会生成打包好的js文件

module.exports={
    mode:'development'
    }

4.安装html-webpack-plugin打包html文件

cnpm i html-webpack-plugin -D

配置html-webpack-plugin

const path=require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

let htmlplugin=new HtmlWebpackPlugin({
    template:path.join(__dirname,'./src/index.html'), //要打包的html源文件
    filename:'index.html' //生成在内存中首页的名称
})


module.exports={
   //webpack开发模式配置，必需的配置
    mode:'development',
    //配置html-webpack-plugin第二部分
    plugins:[
        htmlplugin
    ],
     //配置html-webpack-plugin第二部分

}

再执行webpack，src文件夹下的index.html会被打包到dist下
5.安装webpack-dev-server，实时更新页面

cnpm i webpack-dev-server -D

配置webpack-dev-server

"dev": "webpack-dev-server --open chrome --post 1000 --host 127.0.0.8"

再执行npm run dev就可以实时获取页面信息了