Webpack的基本配置

一、优化项目结构，创建相关的文件,项目结构如下：

src文件夹存放相关js文件，index.html项目的首页面，dist文件夹是webpack 打包目录。

index.js内容为：

alert('我就是webpack');

index.html内容为:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="bundle.js"></script>
</head>
<body></body>
</html>

这里引用bundle.js是用webpack编译之后的文件，这里不要写src/index.js，如果index.js里面涉及到require('./a')这样的语法，不经过编译浏览器是无法识别的。

二、创建 webpack.config.js

如果对 gulpfile.js和Gruntfile.js比较了解的话，对webpack.config.js就比较容易了解，webpack.config.js是webpack的入口，里面配置webpack运行时的相关的参数。webpack.config.js就是webpack的指挥官，他来指挥webpack都是做哪些事情，如何去做。

创建之后的目录结构：

三、WebPack的配置

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');module.exports = {//页面入口文件配置entry: {index: './src/index.js'},//入口文件输出配置output: {path: __dirname,filename: "bundle.js"}  }};

第一步、使用require 导入webpack

var webpack = require('webpack');

把这句话当作在html页面使用<script src="webpakc.js"></script>引用webpack文件。

第二步:声明webpack提供的提取文件公共部分的对象

var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

CommonsChunkPlugin 是webpack的一个插件，它用于提取多个入口文件的公共脚本部分，然后生成一个 common.js 来方便多页面之间进行复用。什么意思哪？例如:

a.js

function a(){}

b.js

function a(){}

a.js和b.js都同样有a函数，如果一个js文件同时引用这两个js文件，webpack 在运行的时候会把这两个函数提取到common.js文件，并且只留下一个，因为它们相同。

第三步：使用module.exports配置webpack的相关参数和方法

entry 是页面入口文件配置，
output 是对应输出项配置（即入口文件最终要生成什么名字的文件、存放到哪里），__dirname表示当前项目的目录，nodejs语法。

第四步、执行编译命令

目前为止webpack的基本配置都已经完成了，这个时候就需要在项目根目录，执行webpack编译命令。

webpack

这个时候项目中就会生成bundle.js文件，bundle.js文件的内容如下：

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};/******/     // The require function
/******/    function __webpack_require__(moduleId) {/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;/******/      // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };/******/      // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);/******/        // Flag the module as loaded
/******/        module.loaded = true;/******/      // Return the exports of the module
/******/        return module.exports;
/******/    }/******/   // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;/******/   // expose the module cache
/******/    __webpack_require__.c = installedModules;/******/  // __webpack_public_path__
/******/    __webpack_require__.p = "";/******/  // Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports) {alert('我就是webpack');/***/ }
/******/ ]);

第五步、运行index.html

目前为止所有的工作都已经做完了，这个时候运行index.html文件

四、总结

webpack的使用非常的方便，只需要安装、配置、执行命令，就可以完成了。webpack配置文件有很多的参数可以进行设置。以后章节我们将逐步讲解高级配置以及模块之间的依赖引用。

转载于:https://www.cnblogs.com/liuchuanfeng/p/6802532.html

Webpack的基本配置相关推荐

React + Typescript + Webpack 开发环境配置
对于复杂或多人开发的 React 项目来说,管理和使用每个组件的 props . state 或许会成为一件让人头痛的事情,而为每一个组件写文档,成本也会比较大,对项目的开发效率也不是最理想的. Ty ...
vue-cli中的webpack的config配置详细说明
vue-cli中的webpack的config配置详细说明打开我们的vue项目文件夹我们可以清楚的看到文件夹下的三个文件, "dev.env.js","index.js ...
webpack打包后引用cdn的js_手摸手 Webpack 多入口配置实践
最近在做项目的时候遇到了一个场景:一个项目有多个入口,不同的入口,路由.组件.资源等有重叠部分,也有各自不同的部分.由于不同入口下的路由页面有一些是重复的,因此我考虑使用 Webpack 多入口配置来 ...
webpack 4.0 配置方法以及错误解决
webpack 4.0 配置方法以及错误解决参考文章: (1)webpack 4.0 配置方法以及错误解决 (2)https://www.cnblogs.com/qqfontofweb/p/8516 ...
webpack安装及配置
1.概念 webpack是一个静态化前端打包,可以把复杂的依赖关系打包为一个或多个文件,最终生成浏览器可以识别的资源html.css图片,js 2.安装 win+r输入cmd 唤出系统控制面板然后进 ...
Vue2，Webpack的基础配置以及使用脚手架创建工程
Webpack的基础配置以及使用脚手架创建工程文章目录 Webpack的基础配置以及使用脚手架创建工程一.模块化二.webpack 1.在项目中安装webpack 2.完成更加复杂的打包工作(c ...
一文搞懂 Webpack 多入口配置
最近在做项目的时候遇到了一个场景:一个项目有多个入口,不同的入口,路由.组件.资源等有重叠部分,也有各自不同的部分.由于不同入口下的路由页面有一些是重复的,因此我考虑使用 Webpack 多入口配置来 ...
React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)
本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel.热更新等) ----2017 ...
webpack从0配置和使用
webpack 1. webpack 概念: 支持模块化和打包核心功能实现前端模块化开发,支持 CommonJS.AMD.CMD,ES6 方案支持模块化开发,并且帮我们建立,模块之间的依赖关 ...
webpack大全---------(基础配置篇)----4.webpack实例三
上一篇:webpack大全---------(基础配置篇)----2.webpack实例二 webpack实例三:讲述代码效验模块eslint.引入第三方模块的处理.图片的打包处理. 第一步:安装配置 ...

Webpack的基本配置

Webpack的基本配置相关推荐

最新文章

热门文章