2019-01-17 webpack4 入门（上）

Tip: 感冒了，一定要戴口罩哦~不要传染给了别的小可爱
2019年到了，看到很多总结2018，畅想2019之类的小可爱，我也觉得需要计划一下2019了，说不定完成了呢！
今天开始总结 webpack4

image.png
首先执行安装指令：
npm install --save-dev webpack
在一开始要明白，webpack最重要的四个核心组成部分： 入口、输出、loader、plugins，这个也很好明白，运行肯定要有入口和输出，在其中要依赖一些loader来识别各种资源，当然也要通过plugins来打包这些资源，>从打包优化和压缩，一直到重新定义环境中的变量
（同学们，自己新建一个dist文件夹，一个src文件夹，src里有index.js，其中import _ from 'lodash'，引入这个全局变量；dist里有index.html,其中引入main.js。这里要注意安装lodash哦，不可以光是引，否则会报错）
然后我们先挑比较简单的入口和输出来说，我们把entry放在src中，在src中对代码进行书写和编辑，而把output放在dist里面，这样让书写的和打包的区域做到了划分

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname,'dist')
  },
}

在这里注意，我们的package.json中要加入以下这句，在不加入这句之前我们还可以使用‘npx webpack --config webpack.config.js’，但是这种方式比较麻烦，所以我们直接在package.json中添加一个npm脚本，相当于添加一个快捷方式"scripts": { "build": "webpack" }
这时，你的项目差不多就有了一个基本的小流程，如何检验呢，自己在/src/index.js中添加一些语句，并执行这些语句，如append一行文字，

var element = document.createElement('div');
  element.innerHTML = _.join(['Hello','webpack'],' ');

然后执行npm run build ，成功build后，找到dist里的index.html，在浏览器上打开这个文件，惊喜看到你在index.js上的操作在index.html上得到了展示。
然而，资源不止是js和html，还有其他的各种资源，我们如何处理，就要聊到loader，先去乖乖下载loader们，需要什么就安装什么，然后乖乖在webpack.config.js中配置，配置好你就可以各种什么CSS、字体、xml数据，添加资源，引用资源啦~

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }

到这里，基本上就是一个我认为的比较基础的webpack的配置过程，这样的简单配置，能够理清其中逻辑，也比较好理解webpack的入门其实不是特别的难，不要给自己压力，慢慢来~