学习使用webpack 4

#1

准备: 已经安装node
开始：可以选择本地安装和全局安装两种方式，官方文档建议使用本地安装，这里使用本地安装的方式

  • npm install --save-dev webpack
    npm install --save-dev webpack@

  • npm install --save-dev webpack-cli //4版本的需要额外下载cli，听说是因为之前这个包和webpack放在一起了，现在摘出来方便管理
    安装就是这样的，我们来试试吧
    先来创建一个项目npm init –y
    npm init –y //创建一个包含package.json文件的项目
    然后我们在这个项目中下载webpack，使用上述步骤完成下载
    然后按理来说我们可以直接使用webpack命令来打包了，但是

不要慌，问题不大，我觉得可能的原因是我们这个不是全局安装的所以找不到吧，不要怀疑自己没下载哦，没关系，稍等我们换种方式试试，先完善下我们的文档结构吧 ，使用npm init 出来的除了一个package.json啥也没了 我们先建一个src目录来放之后开发的代码，然后就变成这样了

Index.js

import _ from 'lodash';
function component() {
    var element = document.createElement('div');
    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  
    return element;
  }
  document.body.appendChild(component());

我的这个里面有用了lodash，你可以自己下一个哦
npm install lodash –save-dev
想要看我们的打包到底能不能用可以在package.json下的script里配置一条命令
“build”: "webpack "
然后我们只需要在命令提示行执行
npm run build 会出现一个dist文件里面有打包完成的js ，那我们怎么可以看到呢，写个index.html 看看吧，引用刚才打包完成的js就可以了，现在我们应该会看到

腻害腻害，成功咯
然后之后就是看着文档来进行配置了
我们需要一个webpack.config.js文件来放打包的配置
然后修改package.json下的script里配置一条命令
-“build”: "webpack "

  • webpack --config webpack.config.js
    其实webpack.config.js这个文件夹名可以随便写，哈哈
    然后就是写配置，最基础的就是配置打包的入口，出口，还有一些插件的应用什么的