详解webpack模块化管理和打包工具

本篇文章主要介绍了详解webpack模块化管理和打包工具，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

Webpack简介

webpack是当下最热门的前端资源模块化管理和打包工具。 它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际

需要的时候再异步加载。通过 loader  的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

模块系统的演进

这是最原始的 Javascript 文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在 window  对象中，

不同模块的接口调用都是一个作用域中，一些复杂的框架，会使用命名空间的概念来组织这些模块的接口，典型的例子如 YUI  库。

这种原始的加载方式暴露了一些显而易见的弊端：

1. 全局作用域下容易造成变量冲突
2. 文件只能按照  

   创建entry.js

   // entry.js : 在页面中打印出一句话
   document.write('It works.')
   

   然后编译 entry.js并打包到 bundle.js文件中

   // 使用npm命令 
   webpack entry.js bundle.js
   

   使用模块

   1.创建模块module.js,在内部导出内容

   module.exports = 'It works from module.js'

   2.在entry.js中使用自定义的模块

   //entry.js
   document.write('It works.')
   document.write(require('./module.js')) // 添加模块

   加载css模块

   1.安装css-loader

   npm install css-loader style-loader --save-dev

   2.创建css文件

   //style.css
   body { background: yellow; }

   3.修改 entry.js：

   require("!style-loader!css-loader!./style.css") // 载入 style.css
   document.write('It works.')
   document.write(require('./module.js'))
   

   创建配置文件webpack.config.js

   1.创建文件

   var webpack = require('webpack')
   
   module.exports = {
    entry: './entry.js',
    output: {
     path: __dirname,
     filename: 'bundle.js'
    },
    module: {
     loaders: [
       //同时简化 entry.js 中的 style.css 加载方式：require('./style.css')
      {test: /.css$/, loader: 'style-loader!css-loader'}
     ]
    }
   }
   
   

   2.修改 entry.js 中的 style.css 加载方式：require('./style.css')

   3.运行webpack

   在命令行页面直接输入webpack

   插件使用

   1.插件安装

   //添加注释的插件
   npm install --save-devbannerplugin

   2.配置文件的书写

   var webpack = require('webpack')
   
   module.exports = {
     entry: './entry.js',
     output: {
       path: __dirname,
       filename: 'bundle.js'
     },
     module: {
       loaders: [
         //同时简化 entry.js 中的 style.css 加载方式：require('./style.css')
         {
    test: /.css$/,
    loader: 'style-loader!css-loader'
         }
       ],
       plugins: [
         //添加注释的插件
         new webpack.BannerPlugin('This file is created by zhaoda')
       ]
     }
   }
   
   

   3.运行webpack

   // 可以在bundle.js的头部看到注释信息
   
   

   开发环境

   webpack

   --progress : 显示编译的进度

   --colors ：　带颜色显示，美化输出

   --watch　：　开启监视器，不用每次变化后都手动编译
   

   12.4.7.1. webpack-dev-server

   开启服务,以监听模式自动运行

   1.安装包

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

   2.启动服务

   实时监控页面并自动刷新

   webpack-dev-server --progress --colors

   自动编译

   1.安装插件

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

   2.在配置文件中导入包

   var htmlWebpackPlugin = require('html-webpack-plugin')

   3.在配置文件中使用插件

   plugins: [
       //添加注释的插件
       new webpack.BannerPlugin('This file is created by zhaoda'),
       //自动编译
       new htmlWebpackPlugin({
         title: "index",
         filename: 'index.html', //在内存中生成的网页的名称
         template: './index.html' //生成网页名称的依据
       })
     ]
   

   4.运行项目

   webpack--save-dev

   以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。