技术控

    今日:102| 主题:49113
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] webpack 先这么用

[复制链接]
汉子你别跑丫 发表于 2016-10-5 13:41:03
206 2

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

webpack 先这么用-1 (配置文件,require,style,图片,开发)

  webpack

   介绍
  Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源;
  开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等
  安装

  [code]// 全局安装
npm install webpack -g[/code]  [code]// 进入项目,安装到项目依赖中
npm init
npm install webpack --save-dev[/code]  配置文件

  每个项目下都必须配置有一个 webpack.config.js ,它的作用如同常规的 gulpfile.js/Gruntfile.js,作为配置项告诉 webpack 如何工作。
   默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 --config 选项来指定配置文件
  例子:
  [code]module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};[/code]  Loader

  Loader 用于预处理文件
  使用方式

  
       
  •   通过 require 指定
       
  • webpack.config.js 中配置
       
  • 命令行执行
      
  插件 Plugins

     通过插件可以添加特定功能
   
       
  • 内嵌插件
       
  • 第三方插件
       
    DefinePlugin

  内嵌插件,无需安装
  用于在编译期间定义常量
  使用

  例子:
  [code]new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true),
    VERSION: JSON.stringify("5fa3b9"),
    BROWSER_SUPPORTS_HTML5: true,
    TWO: "1+1",
    "typeof window": JSON.stringify("object")
})[/code]  copy-webpack-plugin

  拷贝资源插件
   官方这样解释 Copy files and directories in webpack ,在 webpack 中拷贝文件和文件夹
   https://github.com/kevlened/c...
  安装

  [code]npm install --save-dev copy-webpack-plugin[/code]  使用

  new CopyWebpackPlugin([patterns], options)
   在 web pack.config.js 中添加:
  [code]var CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
     plugins: [
         ...
          new CopyWebpackPlugin([{
            from: __dirname + '/src/index.html',
            to: __dirname + '/dist'
        }]),
         ...
     ]
}[/code]  配置项

  clean-webpack-plugin

  删除编译资源
  在编译前,删除之前编译结果目录或文件
   https://github.com/johnagan/c...
  安装

  [code]npm install clean-webpack-plugin --save-dev[/code]  使用

   在 web pack.config.js 中添加:
  [code]var CleanPlugin = require("clean-webpack-plugin");

module.exports = {
    ...
     plugins: [
         ...
             new CleanPlugin(['dist', 'build']),
         ...
     ]
    ...
}[/code]   dist 与 build 为需要删除资源
  html-webpack-plugin

     自动生成html插件
    生成 HTML5 文件并注入 webpack 绑定的一系列 js & css,生成对应 友荐云推荐




上一篇:Sourcegraph provides intelligent searches of Go language code
下一篇:来自天国的 kubernetes
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

wxfdg 发表于 2016-10-15 11:52:05
学习下
回复 支持 反对

使用道具 举报

chailijia 发表于 2016-11-15 07:08:42
永远有多远?你小子就给我滚多远。
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.