webpack4.0入个门

时间 2019-11-06

标签 webpack4.0 webpack 繁體版

原文原文链接

为何要学习webpack

webpack是如今主流的前端构建工具，主流公司的项目中几乎都有他的存在。不少同窗接触到现代前端可能就是学习的Vue，vue-cli脚手架会自动帮你生成一个web工程，他就是基于webpack进行构建的。可是只会使用现成的脚手架工具是远远不够的，想要更深刻的了解其中的运行机制还得本身从0开始搭建web工程。下面咱们开始从0搭建一个简单的入门级demo。css

入门要点

本篇文章针对的是webpack小白，看完以后呢，你将会了解到大体的webpack运行流程啦。简单的来讲就是，就是咱们写的文件从哪儿来到哪儿去的这么一个流程。话很少说，开始动手吧。html

开始动手

首先建立一个文件夹webpackStudy做为咱们的工程文件。前端

初始化

进入webpackStudy文件夹中，在命令行中使用npm init来初始化生成一个新的 package.json 文件。而后根据命令行中的提示自行设置工程名称，版本号，项目描述等选项。而后咱们的文件夹目录就会多出一个package.json文件，这个文件会把web工程中的一些依赖、命令、描述等集中起来，它至关于一张制造图纸。vue

而后咱们进行webpack的安装，webpack4.0在安装webpack的同时还须要进行webpack-cli的安装。运行命令npm install -D webpack webpack-cli(-D的意思是安装本地依赖)。node

接下来，咱们须要添加如下目录或文件。webpack

webpack-demo
|- package.json
|- src
    |- index.js
|- webpack.config.js
复制代码

src目录是开发目录
index.js是入口文件，负责开发目录与打包器的链接。
webpack.config.js是webpack的配置文件，他负责操做webpack这个打包器。

入口（entry）

entry会指示webpack应该使用哪一个模块，来做为起点模块，而后在进入起点模块之后，webpack会对起点模块的各个依赖模块进行加载和分析。git

webpack.config.jses6

const path = require("path");
moudule.exports = {
    entry: {
        index: path.resolve(__dirname, 'src/index.js')
    }
}
复制代码

以上就是对入口的简单配置，在上面的entry对象中，配置的是单入口，会加载以index为模块名称的模块。path模块是js自带模块，用于处理文件路径和目录路径。github

出口（output）

有入口就有出口，output属性会告诉webpack在哪里输出它通过处理后建立的文件，以及如何命名这些文件。在web工程中，整个应用程序结构都会被编译到所指定的输出路径的文件夹中。web

const path = require("path");
moudule.exports = {
    entry: {
        index: path.resolve(__dirname, 'src/index.js')
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    }
}
复制代码

上面的示例当中，咱们指定输出路径为当前目录结构下的，dist目录，输出的文件名为bundle.js。

下面咱们进行简单的测试

src/index.js

console.log("hello world");
复制代码

package.json

略...
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
},
复制代码

对index.js写入打印代码，同时对package.json写入script执行命令。build命令的意思是，运行npm run build时，会调用webpack处理webpack.config.js(默认处理文件)文件。

运行npm run build，此时的目录结构变成

webpack-demo
|- dist
    |-bundle.js
|- package.json
|- src
    |- index.js
|- webpack.config.js
复制代码

运行node dist/bundle，控制台输出hello world。

运行时的警告
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to
'development' or 'production' to enable defaults for each environment.
是由于没有选择模式形成的，忽略便可。
复制代码

装载（loader）

webpack自身只能理解JavaScript文件，可是项目中确定会有其余的文件，最经常使用的确定是图片文件和css文件，webpack须要依靠各种loader去处理非Javascript文件，将他们转换成webpack可以有效进行处理的模块，而后webpack会对他们进行打包处理而后输出。下面来进行css文件和图片文件的处理。首先安装依赖npm install -D style-loader css-loader url-loader。

const path = require("path");

module.exports = {
略···
    module: {
        rules: [
            {
                test: /\.css$/,
                    use: [
                        "style-loader",
                        "css-loader"
                    ]    
            },{
                test: /\.(png|svg|jpg|gif)$/,
                use:{
                    loader:'url-loader',
                    options: {
                        limit: 8192, //文件大小限制
                        name: 'images/[name].[ext]?[hash]'
                    }
                }    
            }
        ]
    }
}
复制代码

test选项用于标识出应该被对应的loader进行转换的某种文件。
use选项表示转换时对应的loder。use对应的数组的处理顺序是从后往前。
options能够进行一些选项的配置，图片处理中limit选项是限制文件的大小，而name选项中的name是对应的文件名，ext则是文件的后缀，hash则是该文件的hash码。

测试

向src目录中添加图片，以及新建一个style.css文件。向dist目录添加一个index.html文件,来展现打包后的内容。

webpack-demo
|- dist
    |-index.html
    |-bundle.js
|- package.json
|- src
    |- index.js
    |- img.png
    | -style.css
|- webpack.config.js
复制代码

src/index.js

import "./style.css"
import imgUrl from "./img.png"

function createComponent(){
    var element = document.createElement('div');
    element.innerHTML = ['hello webpack'];
    return element;
}
function createImg(){
    var imgBox = document.createElement('img');
    imgBox.src = imgUrl;
    return imgBox;
}

document.body.append(createComponent(),createImg());
复制代码

src/style.css

body{
    text-align: center;
    color: blueviolet;
    font-size: 40px;
    font-weight:bold;
}
复制代码

dist/index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpackStudy</title>
</head>
<body></body>
<script src="./bundle.js"></script>
</html>
复制代码

运行npm run build后，而后打开dist里面的index.html你将会看到你再src/index.js里面写的内容。

插件（plugins）

前面说到，webpack会把工程目录下的文件处理而后打包到dist目录中去。按理说，dist目录中不该该由咱们建立文件的，因此这时候插件（plugins）派上用场了。

插件相对于loader来讲，能够执行更广的任务，从打包到压缩，到分割文件...它能够用来处理各类各样的任务。下面咱们将用上html-webpack-plugin插件来处理dist目录中的html文件自动生成，并加载bundle资源问题。

首先安装依赖npm install -D html-webpack-plugin

webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    略...
    plugins:[
        new HtmlWebpackPlugin({
            title:'WebpackTest' //设置html文件文件名称,
        })
    ]
}
复制代码

咱们添加了插件html-webpack-plugin,而后删除dist文件中的html文件,而后运行npm run build命令后会发现,dist目录中会自动建立index.html文件并加载bunlde.js,这都是插件在发挥做用。

dev-server

在实际的开发中，咱们不可能每进行一次修改后就打包一次，这样无疑是很是低效的。因此咱们须要一个工具，能够随时让咱们看到咱们写的效果。webpack-dev-server就是这样一个工具，下面咱们来进行安装和使用。首先安装依赖npm install -D webpack-dev-server

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open",
    "build": "webpack"，
    
},
复制代码

package.json中的dev命令的意思是，运行npm run dev时，会调用webpack-dev-server工具来执行webpack.config.js(默认文件)。
--open选项的意思是执行该命令时自动打开浏览器访问。

运行npm run dev会自动打开浏览器，并访问http://localhost:8080(默认端口,如8080端口被占用会依此类推)。

github

代码在个人github仓库step1分支。

END

至此，咱们就能够算是对webpack4.0入了个门。咱们写出了一个简易的webpackdemo，大体了解了webpack进行打包处理，如何使用loader，如何使用插件，如何安装webpack-dev-server以便于在开发中使用。固然webpack的世界远不止于此，还有更多的内容等着咱们去了解。

想用webpack作更多事情能够看个人另外一篇文章《webpack4.0+vue+es6配置》