webpack搭建热更新-热部署/babel-配置

1.创建目录 如下图↓

2.首先下载node.js node.js官网

在终端输入
npm i webapck -D 项目安装一下webpack
如果是第一次搭建webpack 则需要全局安装webpack npm i webpack -g
注：不知道npm 的要先去学习下node 呀
npm 下载慢去映射一下cnpm
进入正题了

1. 在webpack.config.js 中输入

let path = require('path')
module.exports = {
    /**
     * mode 模式
     * production 生产模式
     * development 开发模式
     * */
    mode: "development",
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './public'),
        filename: 'main.js'
    }
}

在控制台输入 npm 终端输入webpack public就会出现一个打包好的main.js在index.html中引入
2. 配置自动刷新页面 (热部署)
npm i html-webpack-plugin -D

let path = require('path');
let htmlWebpaclPlugin = require('html-webpack-plugin')
module.exports = {
  /**
     * mode 模式
     * production 生产模式
     * development 开发模式
     * */
    mode: "development",
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './public'),
        filename: 'main.js'
    },
    devServer:{
        open:true, // 自动打开浏览器
        overlay: true, // 全屏显示报错
        port: 2323,   // 自定义端口
    },
    plugins: [
        new htmlWebpaclPlugin({
            template: './public/index.html'
        })
    ]
}

在npm 终端输入webpack-dev-server 就可以自动打开页面了修改html 也可以自动更新页面了。

解决方法：

现在使用webpack要同时安装webpack-cli这个包，才可以调用webpack和webpack-dev-server这些命令。
cnpm install webpack webpack-dev-server webpack-cli --save-dev

在执行webpack-dev-server
或者在package.json 配置

在执行 npm start
3.现在页面虽然可以无手动刷新页面了,但是这种引入css会报错
main.js 中引入

import './index.css'

原因是没有下载css-loader
npm i style-loader css-loader -D
在webpack.config.js 配置

4.之后在配置一下babel 用于把高级语法转换为ES5的
4.1 下载babel的依赖
npm i @babel/core @babel/preset-env babel-loader -D
4.2 webpack.config.js 进行配置

module:{
    rules:[{
        test:/\.js$/,
       	loader: 'babel-loader',
        exclude:/node_modules/  // 排除查找node_modules
    }]
}

4.3目录新建.babelrc文件

写入下列代码之后在构建，完成之后就可以看见高级语法被转换了

{
  "presets": [
   "@babel/preset-env"
  ]
 }

webpack-config.js 全部代码

let path = require('path');
let htmlWebpaclPlugin = require('html-webpack-plugin')
module.exports = {
  /**
     * mode 模式
     * production 生产模式
     * development 开发模式
     * */
    mode: "development",
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './public'),
        filename: 'main.js'
    },
	  module: {
	    rules: [{
	        test: /\.css$/,
	        use: [{
	          loader: 'style-loader'
	        }, {
	          loader: 'css-loader'
	        }]
	      },
	      {
	        test: /\.js$/,
	        loader: 'babel-loader',
	        exclude: /node_modules/
	      }
	    ]
	  },
    devServer: {
        open: true, // 自动打开浏览器
        overlay: true, // 全屏显示报错
        port: 2323, // 自定义端口
    },
    plugins: [
        new htmlWebpaclPlugin({
            template: './public/index.html'
        })
    ]
}

这篇文章就到在这里结束啦~~ 欢迎评论呀
一起努力呀 前端的小伙伴们