webpack基础使用配置

webpack使用文档

1.全局安装webpack webpack-cli webpack-dev--server

npm i webpack webpack-cli webpack-dev--server -g

2.创建项目

• 在项目根目录创建src,dist文件夹
• 在src文件中创建index.js文件,在dist文件中创建index.html文件

3.创建package.json文件

npm init -y
y:表示所有配置按默认配置

4.打包文件

webpack

打包完成后,会在dist文件中出现打包好的main.js文件

(可选)自定义打包命令

package.json文件

    "scripts":{
        "build":"webpack --mode=production"
    }
    //注:mode:表示该命令是生产还是开发命令
            production:生产模式
            development:开发模式

5.配置本地服务器

新建config文件夹,新建webbpack.config.js文件

const path=require('path');

module.exports={
    //入口文件配置
    entry:{
        main:'./src/main.js',
        index:'./src/index.js'
    },
    //出口文件配置
    output:{
        path:path.resolve(__dirname,'../dist'),
        filename:'[name].js'//打包后的名字
    },
    //配置本地服务器
    devServer:{
        //设置基本目录结构
        contentBase:path.resolve(__dirname,'../dist'),
        //设置服务器的ip地址
        host:'localhost',
        //服务压缩是否开启
        compress:true,
        //配置服务端口号
        port:8080
    }
}

还有其他打包插件按需安装

转载于:https://www.jianshu.com/p/53b458b55ffc