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为开发模式，未压缩版 }