webpack搭建详细

新建一个文件webpackDemo，在终端打开这个文件夹
1.初始化文件夹

npm init

这时候package.json文件出现了，我们输入下列命令安装依赖node-modules
2.全局安装

cnpm install webpack -g
cnpm install --save-dev webpack（本地安装）

如果不全局安装，只是安装到本地，可能会输入webpack的时候不是内部或外部命令
3.安装webpack脚手架
webpack4必须安装
如果不全局安装可能会一直让安装脚手架；这个可能时环境变量配置原因

cnpm i webpack-cli -g 全局 
cnpm i webpack-cli -D 

这时候在webpackDemo根目录新建一个js文件，可以在js问价输入一些内容给，就可以打包了，在更目录会生成一个dist文件，下面会出现index.min.js这个文件便是打包后的代码。
当然这是最最基础的一个打包，往往我们在使用webpack的时候需要配置许多自己的需要的东西，那么干或就从第4步开始
4.在根目录新建public文件夹将js文件引入

新建webpack.config.js文件，看代码

//*webpack.config.js*
const path=require("path");
module.exports={
    //单入口
    entry:"./public/index.js",//入口地址
    output:{
        path:path.resolve(__dirname,"build"),//出口地址
        filename:"bundle.js"//打包后文件夹名称
    },

更改package.json配置

 "scripts": {
    "dev": "webpack --mode developmenta",
    "build": "webpack--mode developmenta",
  },

webpack 是启动打包
--mode developmenta开发环境
--mode developmenta生产环境
这样配置好之后，在终端输入npm run dev便可以进行开发调试打包npm run build便可以进行生产打包
5.配置webpack-dev-server
webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。
webpack-dev-server 主要提供两个功能：
（1）为静态文件提供服务
（2）自动刷新和热替换(HMR)
5.1安装webpack-dev-server

	cnpm install --save-dev webpack-dev-server

5.2配置webpack.config.js文件，代码

const path=require("path");
module.exports={
    //单入口
    entry:"./public/index.js",//入口地址
    output:{
        path:path.resolve(__dirname,"build"),//出口地址
        filename:"bundle.js"//打包后文件夹名称
    },
    devServer: {
        contentBase: "./build", //本地服务器所需加载文件的目录
        host: 'localhost', //服务器IP地址
        port: "1234", //本地服务端口号
        open: true, //自动打开
        inline: true, //文件修改收实时刷新（热更新）
        historyApiFallback: true, //不跳转
        // hot: true //配置热更新插件需要配置这个参数为true
    },
}

5.3配置package.json

"scripts": {
    "dev": "webpack --mode developmenta",
    "build": "webpack --mode production",
    "serve": "webpack-dev-server"
  },

先打包，再输入npm run serve便可以在网页启动一个本地服务浏览
未完待续