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的头部看到注释信息
   /*! This file is created by zhaoda */

   开发环境

   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

   以上是“webpack模块化管理和打包工具的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

   
   当前文章：webpack模块化管理和打包工具的示例分析
   转载来源：http://cxhlcq.com/article/gcgcpp.html