【内推字节】欢迎简历chengxinsong@bytedance.com

webpack4.x入门配置基础(一)

一、前言

webpack在不断的迭代优化,目前已经到了4.29.6。在webpack4这个版本中,做了很多优化,引入了很多特性,将获得更多模块类型,.mjs支持,更好的默认值,更为简洁的模式设置,更加智能的chunk,新增的splitChunks来自定义分隔代码块等等。升级待4,在打包速度,代码体积,数量,以及运行效率上有一个飞跃。


二、安装webpack4最基础入门

2.1首先初始化npm 项目,npm init初始化,生成package.json

node版本建议8.2以上

npm init -y
npm i webpack webpack-cli webpack-dev-server -D

npm i -D是npm install --save-dev 的缩写,是安装模块并保存到package.json的devDependencies中,主要是开发环境的依赖包。


2.2新建src/index.js 和 dist/index.html




2.3webpack4是零配置

在使用webpack进行打包的时候,默认情况下会将src下的入口文件(index.js)进行打包。

可以直接在终端中输入命令webpack 将当前的内容进行一个简单的打包。


这样dist文件夹下面多了一个main.js文件。

但是有一个黄色警告,mode是webpack中独有的,两种打包环境,一个是开发环境:development,另外一个是生产环境:production。

打包的时候,输入webpack --mode=development或者webpack --mode=production就不会出现警告提示了。


下面是webapck --mode=production命令打包,这个是代码压缩过的,细心的朋友应该也发现打包后小了很多。



2.4新建config/webpack.config.js创建文件

在 webpack v4 中,可以无须任何配置,然而大多数项目会需要很复杂的设置,这就是为什么 webpack 仍然要支持 配置文件。这比在 terminal(终端) 中手动输入大量命令要高效的多,所以让我们创建一个配置文件:

进入到webpack.config.js文件中进行配置,具体在代码中注释(这里简单的一些,具体的下面会给大家)

const path = require("path");

module.exports = {
    mode: 'development',
    /*入口文件配置*/
    entry: {
        main: './src/index.js'
    },
    /*出口文件配置*/
    output: {
        /*打包路径*/
        path: path.resolve(__dirname, '../dist'),
/*打包文件名称*/ filename: "main.js" }, /*模块:例如解读css,图片转换,压缩*/ module: { }, /*插件,用于生产的各种功能*/ plugins: [ ], /*配置webpack开发服务的功能*/ devServer: { } }

现在不能执行之前的webpack --mode="development"命令了会报下面的错误。


这里是因为webpack4打包默认找的src下面的index.js入口,我们前面已经删除了,现在这里src下面是main.js文件,所以找不到就报ERROR in Entry module not found: Error: Can't resolve './src' ERROR in Entry module not found: Error: Can't resolve './src' in 'E:\2019github\resume'错误。

所以这里我们到package.json里面配置下命令,让打包的时候执行我们在config/webpack.dev.js下面配置的入口。


2.5package.json配置命令


执行npm run build


现在配置打包时候的入口文件以及出口文件,很多朋友看webpack.dev.js中的注释。入口是./src/main.js

打开index.html


注意:

1、如果你使用的是 npm 5,你可能还会在目录中看到一个 package-lock.json 文件。


以上就是最基础的webpack4的搭建。



三、管理资源

在 webpack 出现之前,前端开发人员会使用 grunt 和 gulp 等工具来处理资源,并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。

像 webpack 这样的工具,将动态打包所有依赖(创建所谓的 依赖图(dependency graph))。

webpack 最出色的功能之一就是,除了引入 JavaScript,还可以通过 loader 引入任何其他类型的文件

3.1 加载css

在js模块中,import 一个css文件,你需要安装style-loader和css-loader,并在配置文件中添加这些loader。

npm i style-loader css-loader --save-dev

webpack.config.js中

const path = require("path");

module.exports = {
    mode: 'development',
    /*入口文件配置*/
    entry: {
        main: './src/index.js'
    },
    /*出口文件配置*/
    output: {
        /*打包路径*/
        path: path.resolve(__dirname, '../dist'),
        /*打包文件名称*/
        filename: "main.js"
    },
    /*模块:例如加载css,图片转换,压缩*/
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    /*插件,用于生产的各种功能*/
    plugins: [

    ],
    /*配置webpack开发服务的功能*/
    devServer: {

    }
}

webpack 根据正则表达式,来确定应该查找哪些文件,并将其提供给指定的 loader。在这个示例中,所有以 .css 结尾的文件,都将被提供给 style-loader 和 css-loader

通过在项目中添加一个新的 style.css 文件,并将其 import 到我们的 index.js中:


在src/index.js

import _ from 'lodash'
import './css/index.css'

function component() {
    let ele = document.createElement('div');
    ele.innerHTML = _.join(['你好,2019,saucxs','webpack']);
    return ele
}

document.body.appendChild(component());

现在运行 build 命令:


查看后发现:


注意:在多数情况下,你也可以进行 CSS 提取,以便在生产环境中节省加载时间。最重要的是,现有的 loader 可以支持任何你可以想到的 CSS 风格 - postcsssass 和 less 等。


3.2 加载image图像

假想,现在我们正在下载 CSS,但是像 background 和 icon 这样的图像,要如何处理呢?使用 file-loader,我们可以轻松地将这些内容混合到 CSS 中:

npm install file-loader --save-dev

webpack.config.js

const path = require("path");

module.exports = {
    mode: 'development',
    /*入口文件配置*/
    entry: {
        main: './src/index.js'
    },
    /*出口文件配置*/
    output: {
        /*打包路径*/
        path: path.resolve(__dirname, '../dist'),
        /*打包文件名称*/
        filename: "main.js"
    },
    /*模块:例如加载css,图片转换,压缩*/
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif|webp)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    /*插件,用于生产的各种功能*/
    plugins: [

    ],
    /*配置webpack开发服务的功能*/
    devServer: {

    }
}

在使用 css-loader 时,如前所示,会使用类似过程处理你的 CSS 中的 url('./my-image.png')。loader 会识别这是一个本地文件,并将 './my-image.png' 路径,替换为 output 目录中图像的最终路径。而 html-loader 以相同的方式处理 <img src="./my-image.png" />

我们向项目添加一个图像,然后看它是如何工作的,你可以使用任何你喜欢的图像:


src/index.js

import _ from 'lodash'
import './css/index.css'
import sau from './img/sau.jpg'

function component() {
    let ele = document.createElement('div');
    ele.innerHTML = _.join(['你好,2019,saucxs','webpack']);

    var image = new Image();
    image.src = sau;
    ele.appendChild(image)

    return ele
}

document.body.appendChild(component());

src/css/index.css

body{
    color: pink;
    background: url('../img/sau.jpg');
}

重新构建并再次打开 index.html 文件


果一切顺利,你现在应该看到你的 sau.jpg图标成为了重复的背景图,以及文本旁边的 img 元素。如果检查此元素,你将看到实际的文件名已更改为 e2c11146949c08b542c068aefc0c1d7b.jpg。这意味着 webpack 在 src 文件夹中找到我们的文件,并对其进行了处理!


3.3 加载字体

像字体这样的其他资源如何处理呢?file-loader 和 url-loader 可以接收并加载任何文件,然后将其输出到构建目录。这就是说,我们可以将它们用于任何类型的文件,也包括字体。让我们更新 webpack.config.js 来处理字体文件:

webpack.config.js

{
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: [
         'file-loader'
      ]
}


文章转载:原创
感谢你的阅读,本文由 sau交流学习社区 版权所有。
如若转载,请注明出处:sau交流学习社区-power by saucxs(程新松)(/page/654.html)
交流咨询
    官方QQ群
    群号663940201,欢迎加入!
    sau交流学习社区交流群

微信群
欢迎加入微信群
微信公众号
欢迎关注微信公众号

图文推荐

微信群
saucxs聊天机器人
saucxs
hi ,欢迎来到sau交流学习社区,欢迎与我聊天,问我问题哦!