webpack开发环境及生产环境基本配置

webpack开发环境及生产环境基本配置

webpack（开发环境）

//确保本机有node环境
node-v
//初始化
npm init -y
//安装webpack环境 可能会有网络问题 可以切换镜像
npm install webpack webpack-cli -D
//新建一个src文件夹 用来存放资源  均在src文件夹下
新建一个index.js文件 
新建一个index.html文件
//安装dev-server
npm install webpack-dev-server -D
//解析html的插件
npm  install html-webpack-plugin -D

//新建一个webpack.config.js  webpack的配置文件 并编写如下代码
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode:'development',//production 生产模式 development开发模式
    entry:path.join(__dirname,'src','index.js'), //__dirname为当前目录 index.js入口文件
    output:{//打包时的输出目录
        filename:'bundle.js',
        path:path.join(__dirname,'dist')
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:path.join(__dirname,'src','index.html'),//src目录下的index.html
            filename:'index.html',//打包之后的index.html 也就是dist中的
        })
    ],
    devServer:{
        port:3000,
        contentBase:path.join(__dirname,'dist')
    }
}
//package.json
{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.4.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  }
}

//运行webpack打包
npm run build
//运行
npm run dev

//babel的用途把ES6语法转换成ES5
npm install @babel/core @babel/preset-env babel-loader -D
//新建一个.babelrc文件
{
    "presets": ["@babel/preset-env"]
}
//webpack.config.js module.exports添加如下配置
    module:{
        rules:[
            {
                test:/\.js$/,
                loader:['babel-loader'],
                include:path.join(__dirname,'src'),
                exclude:/node_modules/
            }
        ]
    },

webpack（生产环境）

webpack.prod.js //给生产环境的配置文件起个名
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    //**********
    mode:'production',//production 生产模式 development开发模式
    entry:path.join(__dirname,'src','index.js'), //__dirname为当前目录 index.js入口文件
    output:{//打包时的输出目录
        //************ 代码内容变化时contenthash会变 代码内容不变时则不变
        filename:'bundle.[contenthash].js',
        path:path.join(__dirname,'dist')
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                loader:['babel-loader'],
                include:path.join(__dirname,'src'),
                exclude:/node_modules/
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:path.join(__dirname,'src','index.html'),//src目录下的index.html
            filename:'index.html',//打包之后的index.html 也就是dist中的
        })
    ]
    //*************
}

package.json 需要修改
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
        //这里不修改的话默认为webpack.config.js
    "build": "webpack --config webpack.prod.js",
    "dev": "webpack-dev-server"
  },

通过npm run build 进行打包

执行npm run dev 之后浏览器打开http://localhost:3000/ 进行查看