对于webpack使用心得

  • 一、在项目中安装webpack
  • 二、示例
  • 三、webpack配置文件
  • 四、webpack工作模式
  • 五、webpack资源模块加载
  • 六、webpack导入资源模块


一、在项目中安装webpack

初始化package.json

yarn init --yes

安装webpack及其核心模块

yarn add webpack webpack-cli --dev

安装webpack-cli后，我们就能通过yarn或者npm执行webpack命令

yarn webpack --version
// 查看webpack和webpack-cli版本，确认安装正常

打包命令

yarn webpack

也可以通过配置package.json中的scripts简化打包命令。

"scripts":{
   "build":"webpack"
 }
yarn build

二、示例

// heading.js
// ES Module语法
// 导出一个创建节点方法
export default () => {
    const element = document.createElement("h2")
    element.textContent = "Hello World"
    element.addEventListener('click', () => {
        alert("hello")
    })
    return element;
}
// index.js
// 导入一个方法
import createHeading from "./heading.js"
const heading = createHeading()
document.body.append(heading)
<!-- html中引入index.js -->
<script type="module" src="./src/index.js"></script>

执行打包命令

yarn build

在dist目录下生成main.js

// main.js
(()=>{"use strict";const e=(()=>{const e=document.createElement("h2");return e.textContent="Hello World",e.addEventListener("click",(()=>{alert("hello")})),e})();document.body.append(e)})();
<!-- html中引入main.js -->
<!-- 由于打包过程会把import和export转换,所以不再需要type='module'了 -->
<script src="dist/main.js"></script>

查看页面效果是正常的，说明打包成功将ES Module语法转换了。

三、webpack配置文件

webpack 4以后的版本，支持零配置打包，整个打包过程会按照约定，将src/index.js作为打包的入口，最终打包的结果会放到dist目录下的main.js文件中。但是一般的话，我们都是需要自定义路径的，那我们就可以在webpack.config.js中配置。

在根目录下新建一个webpack.config.js文件，这是一个运行在node环境下的js文件，也就是说我们需要按照CommonJS的规范去编写代码。

// webpack.config.js
const path = require("path")
module.exports = {
	entry:"./src/index.js", // 指定打包入口文件的路径,注意,如果这里的路径是相对路径, ./是不能省略的
    output:{ // 通过output属性设置输出文件位置,output的值要求是一个对象
        filename:"bundle.js", // 通过filename指定输出文件名称
        path:path.join(__dirname, "output") // 通过path属性指定输出文件的目录,需要输入一个绝对路径
    }
}

配置完后，再执行yarn build，就能以src/index.js作为入口文件，打包一个bundle.js文件生成到项目根目录下的output目录下。

四、webpack工作模式

webpack4新增了一个工作模式的用法，这个用法大大简化了webpack的复杂程度，我们可以将其理解成不同环境的几组预设配置。

webpack打包的工作模式默认是production，此模式下会自动启动一些优化插件，例如自动对我们的代码进行压缩，这对我们的实际生产环境是很友好的，但是打包的结果我们没办法去阅读，我们可以通过cli参数去指定打包模式。

yarn build --mode development

development模式下webpack会自动优化打包速度，并且去添加一些调试当中需要的辅助到我们代码当中。

yarn build --mode none

none模式下webpack就是运行最原始的打包，不会对代码进行任何额外的处理。

除了在cli参数指定工作模式，我们还可以在配置文件中设置。

// webpack.config.js
module.exports = {
	mode:"development"
}

这样webpack就会根据我们配置的工作模式去工作了。

五、webpack资源模块加载

main.css内容：

body{
    margin: 0 atuo;
    background-color: pink;
    font-size: 20px;
    padding: 0 20px;
    width: 100%;
    height: 100%;
}

我们通过webpack.config.js配置文件设置打包入口文件为main.css，尝试打包转换css文件。

const path = require("path")
module.exports = {
    mode:"production",
    entry:"./src/main.css", 
    output:{ 
        filename:"bundle.js" , 
        path:path.join(__dirname, "dist") 
    }
}
yarn build

结果为：

yarn 中nodemanager搭建_yarn 中nodemanager搭建


命令行报了一个模块解析错误，错误信息大体意思就是说，在解析模块过程中，遇到了非法字符，这是因为webpack内部默认只会去处理JavaScript文件，也就是说，他会把打包过程中所遇到的所有文件都当作JavaScript去解析。

报错后其实有提示怎么解决，You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file。意思就是当前没有配置处理此文件的加载器，我们需要用适当的加载器去处理此类型文件。

这也意味这webpack可以用加载器(loader)来处理文件，他内部的loader只能处理js文件，我们可以再去为其他类型的文件添加不同的loader，这里需要一个css-loader，我们通过yarn去安装。

yarn add css-loader --dev

webpack.config.js

module.exports = {
    mode:"none",
    entry:"./src/main.css",
    output:{ 
        filename:"bundle.js", 
        path:path.join(__dirname, "dist") 
    },
    module:{
        rules:[// 这个数组就是我们针对于其他资源模块加载资源的配置
            {
                test:/.css$/, // test值是一个正则表达式，用于匹配打包过程中遇到的文件路径
                use:"css-loader" // 指定匹配到的文件所用到的loader
            }
        ]
    }
}
yarn build

成功打包，通过serve .启动服务，发现页面上并没有实现我们的css效果。这是因为css-loader只是将整个css文件转换成js模块，并没有去引用，所以我们还需要一个style-loader去帮我们引用。

yarn add style-loader --dev
// webpack.config.js
module.exports = {
    ......,
    module:{
        rules:[// 这个数组就是我们针对于其他资源模块加载资源的配置
            {
                test:/.css$/, // test值是一个正则表达式，用于匹配打包过程中遇到的文件路径
                use:[ // 指定匹配到的文件所用到的loader，如果是数组的话，从后往前执行，例如这里先执行css-loader,再执行style-loader
                    "style-loader", // style-loader的作用是把css-loader转换后的结果以style标签的形式追加到页面上
                    "css-loader" // css-loader的作用就是将整个css文件转换成js模块，
                ]
            }
        ]
    }
}

这样我们打包后运行到浏览器中，就能实现css效果了。至此，我们也就实现了把css作为打包文件入口进行打包了。

六、webpack导入资源模块

实际上，我们一般还是以Javascript作为打包入口，因为打包入口从某种程度上说可以算是应用的运行入口，而就目前而言，前端应用当中的业务是由JavaScript去驱动的，所以正确的做法还是以JavaScript作为打包入口，然后在JavaScript中通过import去引入css文件，这样的话css-loader仍然可以正常工作。

我们将webpack.config.js中的入口文件修改会index.js，然后在index.js中引入main.css。

import "./main.css" // 因为我们只是需要去执行这个文件，所以采用这种导入方式

执行yarn build，再执行serve .，打开页面，页面效果正常。

webpack不仅建议我们在js中引入css，而是建议我们在编写代码过程中引入任何当前代码需要的文件，因为真正需要资源的不是应用，而是代码，是代码想要正常工作，就必须要加载对应资源。

js代码本身是负责完成整个应用的业务功能，放大来看就是驱动了整个前端应用，而在实现业务功能的过程中，可能用到样式或图片等一系列的资源文件，如果建立了这种依赖关系，一来逻辑合理，js确实需要这些资源文件；二来保证上线时资源不缺失，每一个上线的文件都是必要的。