webpack

介绍

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

webpack的官方中文文档（https://www.webpackjs.com/）确实做的很好，概念简单易懂。概念的东西就不说了，接下来我就简单总结下webpack项目的搭建过程。

具体过程

• 初始化项目文件目录，生成 package.json 文件

cd ./webpack03
cnpm init 

image.png image.png

• 调整文件目录，如下：

image.png

其中，src 是公共资源文件，/src/index.js 是入口文件，dist 是打包后的文件目录。webpack.config.js 是 webpack 的配置文件。

• index.js
  简单实现index.js文件：

function component(){
    let div = document.createElement('div');
    div.innerHTML = 'Hello webpack';

    return div;
}
document.body.appendChild(component());

• 配置 webpack.config.js
  主要是设置入口文件，输出文件，还有模式。具体如下：

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

• 配置 package.json
  添加一下语句，可直接执行 cnpm run build 进行打包。

image.png

• index.html
  在 index.html 中引进输出文件 bundle.js

<script src="bundle.js"></script>

• 执行打包命令

cnpm run build

image.png

接下来，在浏览器中打开 index.html 文件，不出意外的话，可以看到效果。

image.png

以上就是一个用 webpack 简单配置的过程。当然，还有静态资源，模块，插件等。

loader

以 style-loader， css-loader 为例子。

• 本地安装模块

cnpm install --save-dev style-loader css-loader

image.png

• 在 webpack.config.js 中添加 rules

module: {
    rules: [{
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
    }]
}

• style.css
  在 src 下新建 style.css 文件，并编写规则：

.hello {
    font-size: 30px;
    font-weight: bold;
    color: seagreen;
}

• 在 index.js 中引进并使用 style.css

image.png

• 重新运行 cnpm run build

重新再浏览器中查看 index.html，不出意外的话，会看到以下的效果：

image.png

• 简单总结 loader 就是：npm 进行安装，webpack.config.js 中引进并设置 rules。

服务器 webpack-dev-server

像我们上面这么配置，每次都要执行 cnpm run build，岂不是很麻烦。有一个好东西 webpack-dev-server，可以监控我们代码的改动。

• 安装

npm install --save-dev webpack-dev-server

• 修改 webpack.config.js
  添加以下语句：

devServer: {
  contentBase: './dist'
}

image.png

• 修改 package.json
  添加以下语句：

"start": "webpack-dev-server --open"

image.png

• 执行 cnpm start

不出意外的话，执行完语句之后会自动跳转到目标页面 index.html，之后对项目的更改会实时更新。