webpck学习

##webpack安装
1.webpack安装 npm install webpack --save --dev
2.npm install webpack-cli --save --dev
说明：这里注意一下，–save打包后自动添加到package.json文件中
#–save 和 --dev的区别
我们需要先弄懂dependencies和devDependencies的区别。
以vue搭建的项目为例，在package.json文件中会有两个配置项，一个是dependencies, 另一个是devDependencies,顾名思义，‘依赖’的意思。
dependencies: 在这个配置下的模块是在生产环境下需要依赖的，
例如vue-router，这个模块上线之后也要一直使用的，不然无法实现页面的跳转。
devDependencies: 在这个配置下的模块是在开发环境下需要依赖的，其中dev也是develop单词的缩写，开发的意思。
例如eslint，你在开发过程中，他会矫正你的代码风格，但是发布到生产环境之后，只要程序能跑起来，那就无所谓那些warning了。
所以了解这个之后就很简单了，

通过npm install <模块名> --save-dev下载的模块，会安装到devDependencies下，代表开发环境下需要依赖的，
通过npm install <模块名> --save下载的模块，会安装到dependencies下，代表生产环境下需要依赖的。

##打包命令##

npx webpack

命令说明：
1.npx webpack命令执行会自动去找node_modules文件夹下.bin下的webpack.cmd文件执行；webpack.cmd文件内容如下：

如果当前路径下没有node.exe则到node_modules/webpack/bin/webpack.js执行

##打包结果##
打包后会生成disk文件夹，在文件夹中生成main.js文件；
main.js文件右键–>run code–>可执行
webpack打包支持js的模块化

##手动配置webpack##
默认配置文件的名字为webpack.config.js

//webpack 是node写出来的  ***node写法***
let path = require('path'); //path是内置的 可以直接引入使用
module.exports = {
    mode:"development",//模式 默认两种模式  ***生产模式 production  开发模式development***
    entry : "./src/index.js",//***入口***
    output:{ //***出口***
        filename:"bundle.js",
        path:path.resolve((__dirname,"disk")),//***路径必须是个绝对路径***
    }

}

webpack.config.js的名字的由来，名字可以修改，这里默认用这个名字是因为打包的时候会去执行node_modules/wenpack/bin/webpack.js文件，这里指向了webpack-cli文件，在webpack-cli文件中默认的配置文件名字为：webpack.config.js 和 webpackfile.js两个名字；这里webpack.config.js最为常用；

修改配置文件名字
默认配置文件为webpack.config.js
这里修改成silence.js

1.第一种打包方式：npx webpack --config 配置文件名字
npx webpack --config silence.js
2.在package.json中添加
“script”:{
“build”:“webpack --config silence.js”
}

npm run build
3.在package.json中不指向配置文件名称
“script”:{
“build”:“webpack”
}

npm run build – --config 配置文件名称
npm run build – --config silence.js
说明：npm run build后面跟上-- 则表示 --后面为参数

没有webpack.config.js文件打包npx webpack时展示如下：
打包时会提醒没有设置config文件；

设置了webpack.config.js文件后再打包，npx webpack就不会再提醒上面黄色部分：