webpack使用介绍与安装

2020-01-08  本文已影响0人  写前端的大叔

首先要明白为什么要使用webpack了？前端开发人员在编写前端代码后，不会像移动端一样，在发布的时候我们都是提供安装包给用户进行安装的，而前端是直接发布在服务器，通过浏览器进行访问，并且可以直接查看源码，为了防止源码不被外泄，我们可能会用一些JS工具对代码进行压缩，但如果每次发布都要对代码进行压缩，是相当麻烦后，为了解决这一问题，就出现了很多的自动压缩工具和自动打包工具，比如常见的有Grunt，Gulp，Fis3，webpack,由于工作中用的webpack比较多，所以主要来学习一下webpack。

介绍

Webpack是一个前端资源加载/打包工具，只需要相对简单的配置就可以提供前端工程化需要的各种功能。可以打包所有的样式、图片、JS、资源等。

作用

使用webpack可以很方便的项目中的文件进行打包，当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。其主要作用包括以下几点：

安装

使用npm的如下命令可以进行webpack的安装，如下所示：

npm install webpack webpack-cli --save-dev

关于npm的使用，可以查看之前总结的文章

创建配置文件

虽然webpack4.0可以不用配置文件了，但为了方便起见，创建一个配置文件更容易管理相关的配置信息，直接在项目的根路径下创建 个webpack.config.js的文件。文件中的内容如下所示：

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

配置命令语句

为了方便的使用命令语句，在中可以package.json文中中的scripts处配置一条命令语句，如下所示：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js --mode production"
  },

执行npm run build命令后，将./src/index.js文件进行压缩并输出到bundle.js文件中。

配置文件介绍

1.entry

entry: {
    app: './src/main.js'
  },

通过entry可以配置webpack打包时的起始文件，通过该文件找出哪些文件和库是入口起点（直接和间接）依赖的。比如初始化一个vue项目后，项目将默认以./src/main.js文件作为入口起点，在./src/main.js文件中将引入项目中所依赖的第三方库。如下所示：

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

entry除了指定单个文件外，还可以支持以多个文件作为入口起点，多文件的配置方式如下所示：

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

2.output

output是指通过webpack打包后的文件将以什么文件名输出到指定的目录下，默认为./dist目录下，以下为配置好的output：

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  }
};

const path = require('path');
module.exports = {
    entry: {
        index:'./src/index.js',
        app:'./src/app.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

3.loader

loader是可以让webpack去处理非js文件，loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后就可以利用 webpack 的打包能力，对它们进行处理。使用import可以导入任何文件，比如我们新建了一个json文件，然后import引入该文件时，执行npm run build命令，控制台将会报错，如下所示：

Module not found: Error: Can't resolve 'test.json'

这时候就需要使用loader来配置了。如下所示：

module: {
        rules: [
            {
                test: /\.json$/,
                type: 'javascript/auto',
                loader: 'json-loader'
            },
        ]
    }

由于使用了json-loader，首先需要安装该库，执行以下命令进行安装：

npm install --save-dev json-loader

在 webpack 的配置中 loader 有两个参数：

4.plugins

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。使用插件时，首先需要安装插件库，再使用require()来引入，然后把它添加到plugins数组中，以添加HtmlWebpackPlugin插件为例：

npm install --save-dev html-webpack-plugin

var HtmlWebpackPlugin = require('html-webpack-plugin');

plugins: [new HtmlWebpackPlugin()]

然后执行build命令，将在dist目录下创建一个 html文件，如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
    <script type="text/javascript" src="index.bundle.js">
    </script><script type="text/javascript" src="app.bundle.js"></script>
</body>
</html>

5.模式

通过选择 development 或production 之中的一个，来设置 mode 参数，用于设置开发模式还是生产模式。如下所示：

module.exports = {
  mode: 'production'
};

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

module.exports = {
    entry: {
        index:'./src/index.js',
        app:'./src/app.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.json$/,
                type: 'javascript/auto',
                loader: 'json-loader'
            },
        ]
    },
    plugins: [new HtmlWebpackPlugin()]
};

个人博客

上一篇 下一篇

猜你喜欢

热点阅读