webpack的使用

在需要打包的项目中新建一个webpack.config.js文件
下载webpack依赖插件到本地项目中
npm install webpack --save-dev
此时,会在该项目中自动生成node_modules文件夹
然后配置webpack.config.js文件

var webpack = require('webpack')
module.exports = {
    //配置入口文件,可以是对象形式,也可以是数组形式,可以省略后缀名
    // entry:{
    //     index:'./index'
    // }
    entry:[
            './index'
    ],
    //输出文件出口
    output:{
        //输出路径
        path='./dist',
        //输出的文件名,[name]表示与入口文件的文件名相对应
        filename:'[name].bundle.js',
    },
    //加载器,需要下载不同别的加载器,如css,js,png等
    loaders:[
        //babel加载器可以把jsx的语法转换为js的语法，也可以把es6的语法标准转换es5的语法标准
        {test: /\.js?$/, loaders: ['babel-loader']} 
    ],
    //别名配置器,配置之后可以在别的js文件中直接使用
    resolve:{
        alias:{
            'vue':'./static/js/vue.js'
        }
    }
}

打包命令
webpack/webpack -w

    npm init -y    #简单初始化一个项目
    npm install webpack webpack-cli --save-dev  #安装webpack相关开发依赖

    npx webpack --config webpack.config.js #可以将脚本作为入口起点，然后输出为main.js，如果webpack.config.js存在，将默认使用它，这里使用--config是为了表明可以传递任何名称的配置文件。

    #上面的方式是通过cli运行本地webpack，为了方便我们可以在package.json添加一个npm 脚本 ：
    "scripts":{
        "build":"webpack"
    }
    #这时我们就可以使用npm run build命令来替代我们之前使用的npx命令。