资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/使用webpack打包你的Project

使用webpack打包你的Project

2bdenny / 1817人阅读

摘要：说明代码拆分有两种组织模块依赖的方式，同步和异步。在优化了依赖树后，每一个异步区块都作为一个文件被打包。甚至在加载依赖的时候，允许使用动态表达式。快速运行使用异步和多级缓存提高运行效率，这使得能够以令人难以置信的速度快速增量编译。

webpack 说明

代码拆分：Webpack 有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。

Loader：Webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。

智能解析：Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候，允许使用动态表达式 require("./templates/" + name + ".jade")。

插件系统：Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的 Webpack 插件，来满足各式各样的需求。

快速运行：Webpack 使用异步 I/O 和多级缓存提高运行效率，这使得 Webpack 能够以令人难以置信的速度快速增量编译。

安装

Global: npm install webpack -g

编译

执行 webpack ，编译入口文件 entry.js 并打包到 bundle.js， webpack entry.js bundle.js

编译配置文件 webpack.config.js，去配置 entry.js 文件和 bundle.js 文件路径

var webpack = require("webpack")

module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  }
}
Library

初始化项目 npm init生成 package.js

安装jquery依赖 npm install --save-dev

Loader

安装loader npm instal css-loader style-loader -save-dev

修改配置文件模块 module

安装Babel 包， Babel 是编写下一代 JavaScript 的编译器。这个包允许使用 Babel 和 webpack 转换 JavaScript 文件

babel-loader配置

安装命令 npm install babel-loader babel-core babel-preset-es2015 babel-plugin-transform-runtime babel-preset-stage-0 --save-dev

在 webpack.config.js 里配置 babel

排除匹配文件夹可提高执行速度，多个文件夹写法 exclude: /(node_modules|bower_components)/,

babel: {
    presets: ["es2015", "stage-0"],
    plugins: ["transform-runtime"]
}

//或者放在 .babelrc文件中
{
    presets: ["es2015", "stage-0"],
    plugins: ["transform-runtime"]
}
var webpack = require("webpack");

module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module:{
    loaders: [
        {
            test: /.css$/,
            loader: "style-loader!css-loader"
        },
        {
          test: /.js$/,
          loader: "babel-loader",
          exclude:/node_modules/,
          query: {
            presets: ["es2015", "stage-0"],
            plugins: ["transform-runtime"]
          }
        }
    ]
  }
}
结合vue进行组件化开发

安装 vue 组件 npm install vue vue-loader vue-html-loader vue-style-loader --save-dev

在 webpack.config.js 中引入 vue-loader

需要实时编译模板，而非使用自带的 runtime-only，需要引入如下配置

var webpack = require("webpack");

module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module:{
    loaders: [
        {
            test: /.css$/,
            loader: "style-loader!css-loader"
        },
        {
          test: /.js$/,
          loader: "babel-loader",
          exclude:/node_modules/,
          query: {
            presets: ["es2015", "stage-0"],
            plugins: ["transform-runtime"]
          }
        },
        {
          test: /.vue$/,
          loader: "vue-loader"
        }
    ]
  },
  resolve: {
    alias: {
      "vue$": "vue/dist/vue.esm.js" // "vue/dist/vue.common.js" for webpack 1
    }
  }
}
命令

webpack --display-modules

webpack --display-modules --display-reasons

webpack -d devtools

webpack -p 执行优化文件压缩

webpack -w 后台监控代码修改自动执行 webpack

webpack-dev-server

全局安装 npm install webpack-dev-server -g

执行 webpack-dev-server --inline --hot

配置文件和插件

区分线上和线下的变量 debug = process.env.NODE_ENV !== "production";

修改配置文件如下

生成 json 文件 webpack -- profile --json > demo.js，使用 webpack-analyse上传你的json文件进行分析，或者推荐使用另外一种比较不错的插件 webpack-visualizer

//是否生成sourcemap
//线上引用插件相关 https://github.com/webpack/docs/wiki/list-of-plugins
{
    debug = process.env.NODE_ENV !== "production
    "devtools": debug ? "sourcemap" : null,
    "plugins": debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UgifyJsPlugin({mangle: false, sourcemap: false}),
    ]
}
云服务器 GPU云服务器 Webpack打包分块 webpack使用 webpack 使用公用cdn 使用签名文件打包程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83267.html

相关文章

  • 让webpack2兼容IE8以下代码

    摘要：可用编译低版本代码水有多深不得而知启动新技术提供测试框架进行单元测试，代码覆盖率报告，可与和快速对接。页面的其他资源文件，通过引入单元测试项目启动环境配置为了把保证项目正常运行，请自行更新相关环境。 项目地址：https://github.com/sayll/ie-webpack-start ie-webpack-start showImg(https://segmentfault....

    StonePanda 评论0 收藏0

  • webpack的教程

    摘要：有时候觉得一个工具的学习成本还是很大的，所以唯一的感觉就是随随便便放弃一个工具是多么的难。指定执行的方法命令。这时候我们再看一下目录会多出来一个目录说明你的处女终于破了。 唠唠嗑  前几天在学习webpack时,踩过很多坑，也听过webapck是多么的哔哔哔哔~~， 本人学习的工具有很多,比如sass的初级工具compass,自动化工具gulp,grunt,一起其他杂七杂八的工具。有时...

    Zhuxy 评论0 收藏0

  • Webpack vs Rollup

    摘要：年月份的时候，将的构建工具换成了。的特点代码分割有两种组织模块依赖的方式，同步和异步。而目前在中大型项目中使用得非常广泛。更多网易技术产品运营经验分享请访问网易云社区。文章来源网易云社区 本文由作者余伯贤授权网易云社区发布。 2017年4月份的时候，Facebook将React的构建工具换成了Rollup。很多人就有疑问了，Webpack不也是Facebook团队开发的吗，为什么不使用...

    Null 评论0 收藏0

  • 2018年第33周-javeer对nodejs体会

    摘要：流程源处理源代码，例如过滤任何值。工艺类从编译后处理生成的文件，例如对类进行字节码增强。整合后的测试执行集成测试后执行所需的操作。校验运行任何检查以验证包装是否有效并符合质量标准。 nodejs和es6 nodejs的语法和es6不一样，如模块系统，一个是CommonJS的require、一个是es6的import，写模块也不一样。 nodejs的npm 我来理解，nodejs类似与j...

    xiongzenghui 评论0 收藏0

  • Vue 笔记三：Vue2.0与1.0的区别

    摘要：升级的区别与的断层式升级不同，延续了自己的风格。在命名方式和上有一些区别，掌握它们是你升级整个项目的关键。以下内容都是来源于个人项目的一些经验之谈，并非系统性的阐述。总目录前端经验收集器转载自个人建了前端学习群，旨在一起学习前端。 升级的区别 与angular的断层式升级不同，vue延续了自己的风格。在命名方式和API上有一些区别，掌握它们是你升级整个项目的关键。以下内容都是来源于个人...

    Big_fat_cat 评论0 收藏0

发表评论

登陆后可评论

0条评论

2bdenny

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<