webpack4.X版本的使用

现在，webpack已经更新到了4.X的版本了，在这之前呢，有过一点的接触，简单的学了一下，但是到了这个版本之后呢，发现了很多新的东西，有些指令，包的功能发生一些变化，在使用的过程中也发现了很多的问题，现在做一下整理

首先说一下webpack是什么？他是一个专门打包的工具，在前端开发过程中，是必不可少的，尤其是在大型的项目里面，起到了很大作用，他们把多个js文件打包成一个js文件，减少http请求，减少服务器压力，还能把less，sass，stylus，等前端css预处理器，转换成浏览器认识的css代码，这个是需要加载loader，最后可以优化复杂的前端项目

1.开始

    使用webpack，首先必须要安装node环境，这里就不做介绍了，可以自行百度

2.安装webpack

    首先新建一个文件夹，里面的src文件是必不可少的，然后同级在新建webpack.config.js，用于配置相关参数，在然后用cmd初始化package.js文件，执行npm init -y ，（或者配置了淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org    可以使用cnpm init -y），这个文件分为开发环境（develepment）和生产环境（production),例如：npm i jquery -D  （将jq放在package.json的devDependencies）或者npm i jquery -S  （将jq放在package.json的dependencies）

3.package.json的配置

     可以在script里面配置启动服务启动，打包的配置，npm run dev (启动服务器)  npm run build (对文件进行  打包)，development里面是需要的包

    

3.webpack.config.js  ----  webpack配置文件

        module.exports={
//入口配置
entry:{},
//出口配置
output:{},
//module.rules
//加载loaders
module:{},
//插件
plugins:[],
//开发服务器
devServer:{}

};

    如图：这是一些webpack.config.js的常用配置，平时工作中用的比较多

    

src文件下title的配置

    

这module里面可以加载loaders，用于处理css样式的引入

不断更新中。。。。