资讯专栏INFORMATION COLUMN

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

立即前往
首页/文章专栏/我的webpack学习笔记（一）

我的webpack学习笔记（一）

wh469012917 / 3280人阅读

摘要：前言在上一篇文章中我介绍了学习前的准备工作，下面开始的学习。目标一般我们接触到的关于的文章，都是以解读官方文档为主，而且是针对单页面项目的应用。我先在假设要做一个多页面应用，该如何去通过打包。

前言

在上一篇文章中我介绍了学习webpack前的准备工作，下面开始webpack的学习。

</>复制代码 
  1. *创建webpack-demo文件夹
  2. $ mkdir webpack-demo
  3. $ cd webpack-demo
  4. *初始化一份package.json
  5. $ npm init -y
  6. *package.json内容
  7. {
  8.   "name": "webpack-demo",//项目文件夹名字
  9.   "version": "1.0.0",//项目版本号
  10.   "description": "",//项目的简介
  11.   "main": "index.js",
  12.   "scripts": {//可以通过npm执行的命令 npm run test
  13.     "test": "echo "Error: no test specified" && exit 1"
  14.   },
  15.   "keywords": [],
  16.   "author": "",//作者
  17.   "license": "ISC"
  18. }

请关注package.json的内容在之后的学习中的变化。

目标

一般我们接触到的关于webpack的文章，都是以解读webpack官方文档为主，而且是针对单页面项目的应用。我先在假设要做一个多页面应用，该如何去通过webpack打包js、css。

</>复制代码 
  1. 假设js编写采用的是es6语法,样式采用scss,图标采用iconfont和小图片，页面假设是html（实际可能是php或者jsp等）
项目目录如下

</>复制代码 
  1. 打包思路，在src目录下面创建dist文件夹，我们会根据不同页面功能打包成独立文件夹，其中包含对应的js和css

如下图

多页面应用js打包 
</>复制代码 
  1. webpack安装 
    $ npm install webpack --save-dev
</>复制代码 
  1. # package.json中会出现下面属性
  2.  "devDependencies": {
  3.     "webpack": "^3.2.0"
  4.   }
</>复制代码 
  1. babel安装  (因为我们采用的是es6语法，所以需要通过babel来把代码转换成es5代码，从而在现有环境中执行。)
    $ npm install babel-loader --save-dev
    $ npm install babel-core babel-preset-es2015 --save-dev
    创建.babelrc文件并添加代码 { "presets": ["es2015"] }
</>复制代码 
  1. *在webpack.config.js中添加babel-loaders
  2. module: {
  3.     loaders: [
  4.         {
  5.             test: /.js/,
  6.             loader: "babel",
  7.             include: __dirname + "/src",
  8.         }
  9.     ],
  10. }
</>复制代码 
  1. package.json
</>复制代码 
  1. {
  2.   "name": "webpack-demo",
  3.   "version": "1.0.0",
  4.   "description": "my first webpack demo",
  5.   "scripts": {
  6.     "dev": "webpack"
  7.   },
  8.   "author": "sun",
  9.   "engines": {
  10.     "node": ">= 4.0.0",
  11.     "npm": ">= 3.0.0"
  12.   },
  13.   "devDependencies": {
  14.     "babel-core": "^6.25.0",
  15.     "babel-loader": "^7.1.1",
  16.     "babel-preset-es2015": "^6.24.1",
  17.     "webpack": "^3.2.0"
  18.   },
  19.   "repository": {
  20.     "type": "git",
  21.     "url": "https://github.com/xxxxxx（你的git名）/webpack-demo.git"
  22.   }
  23. }
</>复制代码 
  1. webpack.config.js
</>复制代码 
  1. const path = require("path")
  2. const webpack = require("webpack") //to access built-in plugins
  3. const fs = require("fs")
  4. function getEntry() {
  5.     var jsPath = path.resolve(__dirname, "src/js/app")
  6.     var dirs = fs.readdirSync(jsPath)
  7.     var matchs = [], files = {}
  8.     dirs.forEach(function (item) {
  9.         matchs = item.match(/(.+).js$/);
  10.         if (matchs) {
  11.             files[matchs[1]] = path.resolve(__dirname, "src/js/app", item)
  12.         }
  13.     })
  14.     return files
  15. }
  16. module.exports = {
  17.     entry: getEntry(),
  18.     output: {
  19.       path: path.join(__dirname, "src/dist"), //文件输出目录
  20.       publicPath: "src/dist",        //用于配置文件发布路径，如CDN或本地服务器
  21.       filename: "[name]/[name].js",        //根据入口文件输出的对应多个文件名
  22.     },
  23.     module: {
  24.         loaders: [
  25.             {
  26.                 test: /.js/,
  27.                 loader: "babel-loader",
  28.                 include: __dirname + "/src/js"
  29.                 //include设置只转码src/js下的js文件,不希望被转码的第三方js库可以放在该目录外
  30.             }
  31.         ]
  32.     }
  33. }
</>复制代码 
  1. 下面我们开始打包js代码
</>复制代码 
  1. $ npm run dev
  2. - 执行后src/js/app下面的所有js会被分别打包到/src/js/dist下面，并且保持文件名不变，你会发现此时打包后的js不是压缩后的代码，如果需要压缩代码，需要在webpack.config.js中加入：
  3. plugins: [
  4.     //js文件的压缩
  5.     new webpack.optimize.UglifyJsPlugin({
  6.          compress: {
  7.              warnings: false
  8.          }
  9.      })
  10. ]

下一章学习多页面scss打包

云服务器 GPU云服务器 学习笔记一 学习笔记 基础学习笔记 深度学习笔记

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

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

相关文章

  • 我的webpack学习笔记（一）

    摘要：前言在上一篇文章中我介绍了学习前的准备工作，下面开始的学习。目标一般我们接触到的关于的文章，都是以解读官方文档为主，而且是针对单页面项目的应用。我先在假设要做一个多页面应用，该如何去通过打包。 前言 在上一篇文章中我介绍了学习webpack前的准备工作，下面开始webpack的学习。 *创建webpack-demo文件夹 $ mkdir webpack-demo $ cd webpac...

    CrazyCodes 评论0 收藏0

  • webpack 学习笔记（一）

    摘要：引言最近在学习，发现好多知识点，之前一点都没有接触过，如等等。使用本地安装，会存于文件夹内与属性内，更方便项目文件迁移以及协同开发等情况。 引言 最近在学习webpack，发现好多知识点，之前一点都没有接触过，如babel、core-js、browserslist等等。以前习惯了使用cli构建项目，很多东西不用考虑，拿来就用，这样的码农是不会有能力提升的，必须了解更多的知识点，才能成为...

    zhangwang 评论0 收藏0

  • webpack入门学习手记（二）

    摘要：例如现在的入门学习手记系列。收到粉丝留言和打赏的喜悦。安装上一篇入门学习手记一，主要是介绍了的核心概念，是整个学习过程的基础知识。新生成的类似如下入门学习手记因为生成的内容过多，我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公众号：前端修炼之路，欢迎关注。 最近开始想要维护一个个人的公众...

    Joyven 评论0 收藏0

  • 我的webpack学习笔记（二）

    前言 上一篇文章我们讲了多页面js的打包，本篇文章我们继续scss的打包。 多页面css单独打包 首先，我们css编写采用的是sass，所以我们先来安装sass-loader以及可以用到的依赖 $ npm install sass-loader node-sass css-loader style-loader --save-dev 安装完loaders，下面在webpack.config.js...

    mcterry 评论0 收藏0

发表评论

登陆后可评论

0条评论

wh469012917

男|高级讲师
我要私信

TA的文章

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