webpack入门

一、安装

cnpm install webpack

二、webpack初始化

npm init -y
出现package.json文件

三、 webpack命令行

npm i -D webpack-cli

四、打包

npx(直接定位到node_modules/bin) webpack
npx webpack --mode development(开发模式打包)
npx webpack --mode production(生产模式打包)

五、示例

路径： src/clg.js

export default function clg(msg){
    console.log(msg);
}

路径：src/index.js

import clg from './clg.js'
clg('webpack init')

执行打包命令：

npx webpack --mode development

结果：在dist文件夹下出现main.js

路径：index.html，引入main.js

    
    
    
    
    


    hello

结果：

六、package.json里命令行配置

七、webpack.config.js,npx webpack默认执行的就是webpack.config.js文件，如果是需要执行其他名称的文件，需注明

const path = require('path');
module.exports={
    //当前环境 开发环境:development ,生产环境 production
    "mode": 'development',
    //目标文件
    "entry":[path.resolve(__dirname,'./src/index.js')], //可以配置多个入口文件
    //输出文件
    "output":{
        path: path.resolve(__dirname,'./dist'),
        filename: 'app.js'
    },
    //插件
    "plugins":[],
    //模块规则
    "module":{

    }

}