webpack安装及webpack.config.js与package内部的配置

webpack安装：

全局安装

先全局安装：
有可能安装不成功，就用管理员身份进行安装

npm install webpack -g

在继续全局安装：
有可能会出现一坨不认识的选Y

npm install webpack-cli -g

项目文件夹内安装

初始化

yarn init	

安装webpack和webpack脚手架

yarn add webpack webpack-cli	

查看版本

npm view webpack versions	

yarn add webpack@版本号（推荐4）

完事运行webpack会报一个错误，因为找不到src文件夹内的文件

需要在跟目录建一个src文件夹，里面建一个index.js（默认文件）

根目录创建配置文件：

webpack.config.js配置

const path = require('path')    //引入元素模块
const HtmlWebpackPlugin = require('html-webpack-plugin')    //先需要安装模块yarn add --dev html-webpack-plugin，再引入
module.exports = {
    // entry:'./src/one.js',   //入口文件的路径，引入单文件
    // entry:["./src/one.js","./src/two.js"],      //多入口，单出口
    entry:{     //规定了webpack的入口文件
        one:"./src/one.js",
        two:"./src/two.js"
    },
    output:{    //规定了webpack的出口文件
        // path:path.join(__dirname,'dist'),   //与该文件同级的当前目录，找到当前文件夹
        // path:path.join(__dirname,'../dist'),    //若将改文件放在了别的目录内，就会使打包后的把文件也与此同级，所以给打包的文件指定一个路径
        path:path.join(process.cwd(),"dist"),    //与上面的效果一样，代表的意思是在node进程的目录（当前执行node命令时候的文件夹地址）

        // filename:'one.js'   //重新命名的文件名,单出口
        // filename:'[name].[hash:6].js'    //多出口,（可加后缀并限制长度），当文件没更改的时候是不会重新生成文件的
        filename:'[name].[chunkhash:6].js'  //更改单个文件内容后会指定将更改的文件进行重新打包（默认所有重新打包）
    },
    plugins:[   //直接在打包好的文件中生成一个index.html文件，并自动将其他的文件引入到该html中
        new HtmlWebpackPlugin({
            title:"Gordon",     //在html文件中设置<title><%= htmlWebpackPlugin.options.title %></title>，可以将标题名字传入给html
            template:"./public/index.html"  //可以指定该html模板为打包好的html文件，并可以将其他的js文件自动引入进去，路径从根目录开始
        })
    ],
    devServer:{		//内部集成了 http-proxy-middlerware
        open:true,  //默认自动打开浏览器
        port:8000   //默认知名8000端口
        //proxy:{}  //前端正向代理      后续项目上线打包nginx的反向代理
    }
}

package内部可配置命令

如有报错有可能是版本问题

当webpack版本为4时，webpack-cli版本应将为3

 "scripts": {  //里面写的是命令，可以直接用yarn build,yarn start

  "build": "webpack --mode production --config webpack.config.js",  //--mode指定production为生产模式，压缩版 --config指明配置文件

  "start": "webpack-dev-server --mode development --config webpack.config.js"  //需要先安装文件yarn **add webpack-dev-server（内容改变，视图会自动刷新，热部署功能）** -D development为开发模式，未压缩版
 }