前端工程化与Webpack

Webpack的基本使用

-S表明安装的包要加入 dependencies中，开发和部署上线都需要使用

-D表示 安装的包要加入 devDependencies中，只在开发过程中使用

在项目中配置webpack

// 使用node.js中的导出语法，导出一个配置对象
module.exports={
    //代表webpack的运行模式
    mode:'development'
}

运行完成后根目录中会出现一个dist文件，html文件中引入其中的main.js文件

    <script src="../dist/main.js"></script>

关于mode的两种模式详解

 打包的入口与出口

关于webpack中的默认约定：

 修改入口文件为index1，出口为bundle

const path = require('path')

// 使用node.js中的导出语法，导出一个配置对象
module.exports = {
    //代表webpack的运行模式
    mode: 'development',
    //entry指定要处理哪个文件
    entry: path.join(__dirname, './src/index1.js'),
    //指定文件要放到哪里
    output: {
        //存放目录
        path: path.join(__dirname, 'dist'),
        //生成的文件名
        filename: 'bundle.js'
    }
}

webpack中的插件

其实VUE中脚手架已经帮我们配置好了这些插件，并不需要我们自己配置

webpack-dev-server插件

终端中运行如下命令即可安装此插件

再按如下操作进行配置

 连续按两次ctrl+c可以停止实时打包的服务器。

webpack-dev-server的工作原理

从终端显示的结果可以看出来，我们读取这个文件要从http协议的8080端口进行。

output即为打包好的文件，存储在"/"，即为根目录

没有在磁盘中显示出来，因为插件将打包好的文件存贮在内存之中，读取速度更快。

因此我们在index.html中引入文件的地址也要记得改为根目录

 

html-webpack-plugin插件

终端中运行如下命令即可安装此插件

再在webpack配置文件中按如下操作进行配置

 这个插件的作用在于，我们进入localhost时，总是进入文件的根目录，而我们需要展示的index.html存放在src目录下，我们通过这个插件将磁盘中的index文件复制一份到内存中的根目录下即可直接读取。

 

devServer节点

在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多的配置。

示例代码如下：

 devServer:{
        open:true,//初次打包完成后，自动打开浏览器
        port:80,//实时打包的端口号
        host:'127.0.0.1'//实时打包的端口号
    }

 

webpack中的loader

在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错!
loader加载器的作用:协助webpack打包处理特定的文件模块。

比如:

• css-loader可以打包处理.css相关的文件
• less-loader可以打包处理.less相关的文件
• babel-loader 可以打包处理 webpack无法处理的高级JS语法

 打包处理.css相关的文件

 

 

1. webpack 默认只能打包处理.js结尾的文件，处理不了其它后缀的文件
2. 由于代码中包含了index.css这个文件，因此webpack默认处理不了
3. 当webpack 发现某个文件处理不了的时候，会查找webpack.config.js 这个配置文件，看module.rules数组中，是否配置了对应的loader 加载器。
4. webpack把 index.css这个文件，先转交给最后一个loader进行处理（先转交给css-loader) .

5. 当css-loader处理完毕之后，会把处理的结果，转交给下一个loader(转交给style-loader)

6. 当style-loader处理完毕之后，发现没有下一个loader了，于是就把处理的结果，转交给了webpack

7. webpack把 stvle-loader处理的结果，合并到/dist/bundle.is中，最终生成打包好的文件.

打包处理.less相关的文件

配置完成后重启服务器即可

打包处理样式表中与url路径相关的文件

 注意：其中file-loader是内置依赖项，需要下载安装，但是不需要在文件中配置。

打包处理js 文件中的高级语法

webpack只能打包处理一部分高级的JavaScript 语法。对于那些webpack 无法处理的高级js 语法，需要借助于babel-loader进行打包处理。

 

 其中这个exclude是排除了第三方包，我们解析代码只要管理自己写的js代码就行，因为第三方包中的js兼容性不需要程序员管理。

可以认为这个是插件中的插件

 打包发布

 运行build指令

配置完成后运行npm run build指令

优化图片和js文件的存放路径

图片：

      {test:/\.jpg|png|gif$/,use:'url-loader?limit=470&outputPath=images'},
//loader配置项后加一个outputPath配置参数，指明图片路径

js文件

output: {
    //存放目录
    path: path.join(__dirname, "dist"),
    //生成的文件名
    filename: "js/bundle.js",
  }

配置完成后重新运行指令，在dist文件夹下会多出js和images两个文件夹

自动删除dist目录

 理解：左侧的花括号是解构赋值。

SourceMap

Source Map就是一个信息文件，里面储存着位置信息。也就是说，Source Map文件中存储着压缩混淆后的代码，所对应的转换前的位置。
有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

 

 建议大家在开发调试阶段，在webpack配置文件中，修改devtool的值，与mode同级：

devtool:'eval-source-map'

在生产环境下，如果省略了devtool选项，则最终生成的文件中不包含Source Map.
这能够防止原始代码通
过Source Map的形式暴露给别有所图之人。

因此，sourcemap的最佳实践是

在生产环境下，只定位报错的具体行数，且不暴露源码。此时可以将devtool的值设置为
nosources-source-map

开发环境下:
建议把devtool的值设置为eval-source-map好处:

可以精准定位到具体的错误行
生产环境下:
建议关闭Source Map或将devtool的值设置为nosources-source-map好处:

防止源码泄露，提高网站的安全性

拓展：webpack中@原理

在引入文件时，

建议大家使用@表示src源代码目录，从外往里查找，不要使用../从里往外查找，看起来更简洁明了。

提前在webpack中配置导出如下：

 resolve:{
    alias:{
        //告诉webpack，程序员写的代码中，@表示src这一层目录
        '@':path.join(__dirname,'./src')
    }
  }