webPack 4.0的零基础学习

webPack 也更新到了4.0阶段，本日看了一下官网，总结一下，零底子的学习路径吧。
（1）起首必要下载 webPake和webpack cli   

1. npm install  webpack webpack-cli

复制代码

（2）下载完之后，则是创建新的文件夹，举行初始化

1. //webpack 初始化npm init  

复制代码

（3）完成之后，则是从零设置webpack  必要在根目次下，创建一个 webpack.config.js 的文件，内里用来写webpack 的设置

（4）设置webpack 由于webpack 是基于node.js 运行的，以是起首必要在文件里设置

（5）众所周知，webpack 的工作机制就是把一堆文件打包成 浏览器所熟悉的html 和js 和 css，那么就必要打包的入口文件和打包之后的出口文件夹啊

1. mode: "production", //模式有两种  production development    entry: './src/index.js', //入口    output: {        filename: "build.js", //打包后得文件名  [hash:8]  文件名只体现hash得前8位        path: __dirname + '/build', //绝对路径 },

复制代码

　这里的解释都相当清晰了，以是就不逐一表明了，production 是生产模式（也就是上线的版本）；development 是开辟模式
（6）到了这一步，最底子的就完成了，我们就可以做一个测试了，新建一个src文件夹，在内里创建一个index.js ，输入一点东西，然后运行webpack 则会望见他主动打包成buil文件夹，并在内里天生index.js

这个意味着打包乐成

（7）但是是不是有什么不对呢？那里不短冖呢？如果我想让他天生index.html文件呢？怎么天生？------那么就必要用到插件了  

html-webpack-plugin 这个插件可以在build 文件夹下主动天生index.html  (起首我们必要在下令行中下载这个插件 然后再将其设置到webpack.config.js文件中)　　

1. //下载插件npm add  html-webpack-plugin

复制代码

然后则是在设置文件中举行引用

plugins  这个属性是放置全部用到的插件

运行乐成之后则会主动加载出文件（并且还会主动引入build 文件夹下面的js 文件）

（8）那么如果又css 文件呢？哪有改怎样去打包呢？中心又会涉及到那些标题呢？

css 文件，我们就必要用到 loader (他的作用就是将浏览器不熟悉的文件转换成所熟悉的js或css文件)
loader 的工作机制序次是： 从右向左，从上往下
css 文件中，我们用到的是 css-loader 和style-loader 以是我们应该先下载下来，然后再举行设置

这里我们必要留意的是，在src 文件中，我们在index.js 中引入css 文件时应该用 require 的方式来引入

如许我们可以见已经打包乐成了

（9）那么，标题又来了，既然js 都可以单独打包成一个文件，css 是不是也可以呢

mini-css-extract-plugin  这个插件，则是会主动天生一个css 文件，将其插入在 link 标签内里    之后我们必要的就是在设置文件中举行设置就ok了

（10）细致的你会发先又有个小小的标题（就是纵然在生产模式下，js 文件被压缩成一行了，但是天生的css 却没有呢？这又怎么管理呢）

这时间必要两个插件来管理

1. let OptimizeCss = require('optimize-css-assets-webpack-plugin'); //这个插件可以压缩css文件let UglifyJs = require('uglifyjs-webpack-plugin') //有了css 压缩必须加上这个js压缩 否则 js 文件不会别压缩

复制代码

（11）这些都弄完了，那么如果是时css 文件中又图片呢？ js 文件中有图片呢？那咋整？咱下次再接着说。。。
（12）咦~ 插播一个小小的知识点，各人都知道vue 是集合了webpack 的，打包时直接 npm run build  就好了，那你知道咋设置的吗?

OK，这次真拜拜了~~~~