Webpack初体验

官网文档

https://www.webpackjs.com/concepts/

推荐学习视频

http://biaoyansu.com/i/6593029250131（Webpack精讲 - 表严肃讲Webpack）

这个视频适合初次接触webpack的朋友学习，这个网站里面其他的视频也很好，个人非常喜欢这个老师声音和风格，嘻嘻..

是什么？

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。

其实，他就是一个模块打包器。

为什么？

为了实现模块化，解决共同使用的方法无法共享的问题。

    有次面试的时候，面试官问到我的项目，js文件都是怎么规划的，如果有些方法是被多次调用的，你是怎么做的？what？？？那时候的我还只会一个html引一个js文件，多次调用怎么办？一边写代码一边心里纳闷，js文件里的方法怎么不能互相调用呢？能把那些方法共享就好了。那时候的我对前端一无所知，虽然现在也是小白，不知道webpack这么好的东西，也不了解模块化的具体意义，很当然的我失去了那次实习机会。

怎么用？

  当我跟着视频学习的时候，发现总是出错，上网问了百度的老师们，才知道是3.0的旧版本与现在用的4.0+的新版本是有一些区别的。所以为了自己更好的理解，我分了旧版本和新版本的两部分来学习。

    安装及配置（3.0版本）

  一、新建一个项目，进行初始化，这里是会生成一个package.json文件。

    npm init -y

 二、安装，不建议进行全局安装，很容易发生版本冲突。

     npm i webpack@3.0 -D

生成下面部分（package.json文件内） 

"devDependencies": { "webpack": "^3.0.0" }  

 三、使用

命令行输入下面命令，将a.js 打包为 bundle.js。

注意：是  "  \  "       （斜杠的方向）

    node_modules\.bin\webpack a.js bundle.js

 成功后，html文件便可以对bundle.js文件进行引用。

<script src="./bundle.js"></script>

 四、entry和output

建一个webpack.config.js文件，在里面进行出口和入口及其他配置，简化打包过程：

/* 定义出口文件和入口文件 */
    module.exports={
        entry:'./a',
        output: {
            filename: "bundle.js",
            path: __dirname  
        }
    }

 然后在package.json中的 scripts 加入如下属性：（注意这里的斜线与上面的不同了！！！！）

    "pack": "node_modules/.bin/webpack"

 从此，不必再写 “node_modules\.bin\webpack a.js bundle.js”  这一大串进行打包了！只需要在命令行输入：

    npm run pack

webpack就帮你把a.js打包好啦！ 

 五、如何共享方法和属性

（node语法）

      /* base.js文件   暴露了一个open属性*/

    var open=true;
    module.exports={
        open: open,
    }

 /* a.js通过require 获得其暴露出来的属性open */
    var base=require('./base');
    var open=base.open;

    if(open){
        document.body.innerHTML=`<a href="login.html">登陆</a>`
    }else{
        document.body.innerHTML=`????`
    }

 （ES6语法）

/* base.js 暴露open 属性 */
export {open}

/* a.js 拿取base.js中暴露出的open 属性 */
import {open} from './base';

 

---

  安装及配置（4.0+版本）

  一、新建一个项目，进行初始化，这里是会生成一个package.json文件。

    npm init -y

 二、安装，不建议进行全局安装，很容易发生版本冲突。（webpack默认最高版本安装）

     npm i webpack -D

生成下面部分（package.json文件内） 

    "webpack": "^4.28.1"

继续安装webpack-cli

    npm install webpack-cli -D

三、设置模式

配置webpack的mode选项，默认有production和development两种模式可以设置，因此我们尝试设为development模式，

在命令行输入：

    webpack --mode development

四、创建入口文件

1、webpack4.x以'./src/index.js'作为入口，所以我们新建一个src文件夹，并在里面创建一个index.js文件。

2、webpack4.x的打包已经不能用webpack 文件a 文件b的方式，而是直接运行webpack --mode development或者

webpack --mode production，这样便会默认进行打包，入口文件是'./src/index.js'，输出路径是'./dist/main.js'，其中src目

录即index.js文件需要手动创建，而dist目录及main.js会自动生成。 

因此我们不再按webpack 文件a 文件b的方式运行webpack指令，而是直接运行

    webpack --mode production。

这样便能够实现将'./src/index.js'打包成'./dist/main.js'。 

不过每次都要输入这个命令，非常麻烦，我们在package.json中scripts中加入两个成员：

     "dev":"webpack --mode development",
     "build":"webpack --mode production"

以后我们只需要在命令行执行npm run dev便相当于执行webpack --mode development，执行npm run build便相当于执行

webpack --mode production。 

我们在根目录执行：

    npm run dev

 

总结：

1、创建工程目录； 
2、初始化工程目录：npm init。 
3、局部安装webpack。 
4、局部安装webpack-cli。 
5、webpack –mode development/production进行打包，可在package.json中配置dev和build的脚本，便只需运行npm run dev/build，作用相同。 
6、在webpack –mode development/production可串联设置其他参数。

---

 

最后感谢这位博主老师，webpack4.x开发环境配置，大家可以看这一份。

https://blog.csdn.net/u012443286/article/details/79504289