webpack初探--webpack配置

—前端经过了一年的打磨，虽然目前仍旧属于菜鸟阶段，但前端开发已经逐渐让我陷入到其中，最近由于项目的原因，需要开始接触webpack 打包工具了,在我的在理解中，webpack的优点和好处确实是挺明显的 ： 前端网页在加载网络页面时，在遇到需要请求加载的js代码块，或者css代码块等等的资源时，都需要不断的请求服务器的加载，而导致至不断请求服务器的情况，而webpack打包工具做的事是什么呢？
—嘿嘿，webpack做的工作就是，将前端页面加载所需要的js代码块，css代码块等等进行打包构建，同时，在js代码块或者是css代码块之间需要相互引用等等操作时，能够构建起其间的联系，在浏览器请求的页面的时候，直接通过发送给打包好的各部分代码块，便可以有效的减少不断的去发送更多的请求加载资源，提高加载效率! --当然，webpack的作用当然不仅仅是这么局限，而且以上的阐述可能也不是很准确，大家可以查看官方给出的阐述：webpack官网

—前面的介绍都仅仅只是说明一下为啥要使用webpack进行打包的一些好处；下面快开始来配置和使用webpack：
1.安装webpack :
–这儿我们还是使用npm进行全局的安装webpack：npm install webpack -g
2.在项目中安装webpack ，webpack-cli :
3.在项目中按照正常的方式创建项目文件：及src文件，dist文件
src文件夹下创建js文件，images文件，css文件，fonts文件等等。
以及主页面文件：index.html, js的入口文件：main.js
4.为项目文件进行初始化配置，命令：npm init -y

5.在index.html文件中编写一段简单的html代码进行测试，同时开始在main.js文件中书写一段js代码控制dom; 此时由于我们是使用webpack了，所以我们就不用在html中书写太多的

webpack .\src\main.js .\dist\bundle.js

命令简介：webpack后的第一个参数：.\src\main.js即使需要打包构建的js文件
第二个参数是打包后的文件所在的路径以及文件名称
队友有些新版本的webpack ，在执行以上打包命令的时候，可能会报错，解决方法：
webpack .\src\main.js -o .\dist\bundle.js

6.此时，第一次的打包就已经完成了，只需要在index.html文件中加入一个script标签引入进来这个打包后的js文件就可以了

---

但是，现在问题来了：这样在每次更新js文件的时候，我们都要从新在执行一次 >webpack .\src\main.js .\dist\bundle.js命令，这就太麻烦了，可不可以对这条命令进行简化成只执行>webpack命令就OK了呢？
结果必然是肯定的：我们可以在项目的根目录下创建一个webpack的配置文件，文件名称为：webpack.config.js ,在配置文件中写入webpack需要打包的文件的地址，打包后文件的存放地址及打包后的文件名即可

const path = require('path')
//导入webpack的包
const webpack = require('webpack')
module.exports = {
	//配置webpack要打包的文件入口地址
	entey :  path.join(__dirname, '.\src\main.js'),
	//配置输出文件的地址
	output : {
			path : path.join(__dirname, './dist'),  //指定要打包的文件输出的目录
        	filename : 'bundle.js'  //指定输出文件的名称
       }
  }

这样便可以在简单的配置之后通过仅执行>webpack 命令便可以进行项目打包了

---

那么，问题又来了：我们在每次修改完一次文件后都需要执行打包命令，是不是很麻烦，可不可以就是在每次修改完文件后都自动的去打包生成呢，答案还是肯定的，或许，到这儿，了解nodejs的人已经想到l了我们nodejs里面的nodemon了，它能够实时的检测我们的代码变化后实时的更新执行，那么，webpack 也给我们提供了一个相似的包去实现它：webpack-dev-server

1. 在开始前，我们还是需要在我们的项目中安装它，命令：>npm install webpack-dev-server
   
   2.在安装完成之后直接执行webpack-dev-server 是不行的，会报这不是一条可执行的命令，因为我们只是在项目文件中安装了它，而并不是全局安装的；那如果要执行，就需要在项目的配置文件中进行配置，及在我们的package.json文件中的“script"选项中添加执行命令:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },

此时，我们便可以想nodejs的nodemon一样，只用执行:>npm run dev 便可以对我们的项目文件进行实时的监测了；

但是，我们在修改了项目文件之后，会观察到我们的浏览器加载的页面并未出现从新渲染的情况，这是怎么回事呢？------嘿嘿，接着往下看吧：
原来，由于使用webpack-dev-server进行我们项目的监测时，出于对性能的考虑，它并没有将我们的bundle.js文件更新到我们的磁盘中去，而是直接托管到了我们的内存中，这样才能保证有更高效的从新编译的效率，所以，我们的dist目录下的bundle文件页还是更新之前的，并没有实时的更新，即使是在我们的根目录中也不能够找到我们实时跟新的bundel文件，但是可以这样认为，我们的webpack-dev-server将我们重新打包好的文件以一种虚拟的形式托管到了我们的项目中，虽然无法看到，但是它是和src,dist目录是同级的，所以，我们如果需要使用到webpack-dev-server重新更新的打包文件，那么，我们就要修改index.html文件中’script’的src属性的路径了，及改到src目录下的bundle.js文件即可,这时，再刷新页面，便可以看到我们之前更改的效果了。

另外，webpack-dev-server还为我们提供了其他的一些配置方法：
可以再package.json中再”dev"选项后添加相应的配置:

"dev" :  "webpack-dev-server --open --port 3000 --contentBase src --hot"

配置中:
//–open : 再编译运行的时候自动打开页面
//–port 3000 : 修改webpack-dev-server 默认监听的端口
//–contentBase src : 指定在通过localhost打开相应端口的时候，默认打开的路径。注：因为在默认情况下通过访问webapack-dev-server监听的端口时，打开的是项目的一个目录，需要选择成src目录后方可打开index.html文件
//–hot ： 对打包的文件进行局部的更行，而不是对bundle.js文件进行重新的打包生成，而只是创建了一份更新文件的补丁文件加入到bbundle.js文件中去

另外，对于webpack-dev-server的配置也可以放到webpack的配置文件中去进行，由于过程相较于上面的这种方式而言更复杂，所以这里我就直接附上配置文件的代码，不做更具体的解释，大家感兴趣可以自行百度：

const path = require('path') 
const webpack = require('webpack')

// 这个配置文件就是一个js文件，通过node 中的模块操作向外暴露了一个配置对象:webpack
module.exports = {
    //表示要使用webpack打包的入口文件地址
    entry : path.join(__dirname, './src/main.js'),
    //输出的文件地址
    output : {
        path : path.join(__dirname, './dist'),  //指定要打包的文件输出的目录
        filename : 'bundle.js'  //指定输出文件的名称
    },
    // webpack-dev-server参数的第二中配置方式
    devServer : {
        // 自动打开浏览器
        open : true,
        // 设置启动时的端口
        port : 3000,
        // 启动的根目录
        contentBase : 'src',
        // hot属性
        hot : true
    },
    plugins : [
        // 配置插件的节点
        new webpack.HotModuleReplacementPlugin() ,//new 一个webpack    --hot更新的模块对象
    ]
 }

此时，项目通过webpack就基本打包好了。
但是，此时我们的bundle.js是我们内存中的一个文件，而index.html是一个磁盘中文件，那么，我们是否可以也将index.html也打包一份到内存中去呢？也是肯定的：
///通过给我们的项目文件中安装：html-webpack-plugin 及可以实现：
//>npm install html-webpack-plugin

安装完成之后，在我们的webpack配置文件中去给它配置一下：

// 导入在内存中生成 html页面的插件
// 只要是插件，都需要放到plugins节点中去
const htmlwebpackplugin = require('html-webpack-plugin')
module.exprots = {
	plugins : [
		// 创建一个在内存中生成html页面的插件
        new htmlwebpackplugin({
            // template属性:指定模板页面，将来会根据指定的模板页面路径，去生成内存中的页面
            template : path.join(__dirname,'./src/index.html'),
            // 指定生成页面的名称
            filename : 'index.html'
        })
    ]
    }

以上代码只是为html-webpack-plugin 添加的配置内容，需要加入到原本的配置文件中去的
执行时，我们会发现，在我们右键打开页面代码时，代码中在结处又出现了一个script标签，这是因为
通过使用了 html-webpack-plugin 之后，这个插件会帮我们自动在html文件中添加上一个合适路径的script便签去引用bundle.js文件，那么，这时候，就不需要我们再在html文件中引用script标签了，这是不是就变得更加的方便了！！！

////------------------------------嘿嘿嘿，至此，对于webpack对js项目文件打包的一些基本的操作就差不多了，但是如果我们要处理的时非js文件呢？那我们就需要在手动去安装一些node的第三方加载器了:
例如处理css文件：需要安装style-loader 和css-loader

在加载完成后再webpack配置文件中进行配置后即可使用了
在webpack.config.js的配置文件中加入以下的配置项即可在main.js 通过import语法对css文件进行引用使用了

 module : {  //这个节点，用于配置所有的第三方模块加载器

        rules : [
            //所有第三方模块的匹配规则
            { test : /\.css$/ , use : ['style-loader', 'css-loader']},
            //处理配置第三方loader的方式
        ]
    }

///----至此，对于webpack的一些基本操作方式就说得差不多了；

//声明：此博客属于web萌新编写，如果文章中存在问题，欢迎留言纠正，谢谢！！！