webpack包教不包会系列（2）

头像
fsrookie
    阅读 7 分钟
    3

    注：在github上看到一篇比较好的webpack入门教程，本人也是为了加深印象以此记录。奉上原文地址：https://github.com/kingvid-ch。

    目标

    建立一个lesson1项目，在项目中创建html, css, js， 图片等静态文件，编写webpack配置文件，然后生成如下页面。

    clipboard.png

    要求
    1. 使用require引入jQuery， 切页面中药使用jQuery操作DOM.
    2. 输入npm run build能正确打包静态文件，本地打开index.html页面样式正常无错误。
    挑战

    将原页面中的"hello world"修改成"你好世界"，css文件打包命名位stylesheet.css，本地打开index.html时，页面能正确显示且样式无错误。

    知识点
    1. webpack配置文件。学习config文件部分常用参数含义以及作用。
    2. webpack loader。使用loader来解析各种静态资源文件。
    3. webpack plugin。使用插件来协助解析和生成资源。
    课程内容

    新建lesson01文件夹，进入文件夹使用npm安装webpack到本地

    mkdir lesson01 && cd lesson01
npm init -y
npm install webpack --save-dev

    新建src文件夹，在里面编写项目静态文件

    mkdir src && cd src
touch index.html style.css main.js
npm install jquery --save
mkidr img

    复制以下内容到index.html

    <html>
 <head> 
  <meta charset="UTF-8" /> 
  <title>webpack-lesson1</title>
 </head> 
 <body> 
  <img src="./img/1.jpg" alt="放弃我的脸" /> 
  <h1>hello world!!!</h1> 
 </body>
</html>

    复制以下内容到style.css

    body {
  text-align: center;
  font-size: 16px;
}

img {
  width: 500px;
  height: auto;
}

    复制以下内容到main.js

    $("body").append('<h2>This is created by jquery!</h2>');

    在img文件夹中放入以下图片：

    clipboard.png

    编写配置文件

    新建一个webpack.config.js和webpack.entry.js入口文件：

    touch webpack.config.js webpack.entry.js

    复制以下代码到webpack.config.js:

    //webpack配置文件符合commonJs模块规范
var path = require('path'); //这里引入path是为了解析相对路径，配置文件某些路径要求是绝对路径
module.exports = {
  // 入口文件，webpack据此对项目进行打包
  // 类型： String字符串 | Array数组 | Object对象
  // lesson1很简单，只使用一个入口
  entry: './webpack.entry.js',
  // webpack的入口文件，后面会创建
  // 定义webpack打包时的输出文件名及路径
  output: {
    // 定义webpack打包之后的文件名
    filename: 'webpack.bundle.js',

    // 定义打包文件的存储路径：当前目录的build文件夹
    path: path.resolve(__dirname, './build'),

    // 声明资源（js、css、图片等）的引用路径
    // webpack打包时会把html页面上的相对路径根据publicPath解析成绝对路径
    // eg：当publicPath为'https://jd.com/'时，如果有html或者css含有一张图片相对路径为'./img/test.jpg',打包之后html（或css）中图片的路径就会变成'https://jd.com/img/test.jpg'
    publicPath: ''
  },

  // 用于解析entry选项的基础目录(必须是绝对路径)，该目录必须包含入口文件
  // 默认: process.cwd()
  context: __dirname
};

    再复制以下代码到webpack.entry.js:

    // 入口文件在浏览器端的表现类似于html代码中的 < script >
// 在这里输入 console.log('Hello world!')，能在浏览器控制台看到打印结果
require('./src/index.html');
require('./src/style.css');
require('./src/main.js');

    整体的目录结构如下：

    clipboard.png

    以上配置webpack打包的入口文件和输出路径，以及在入口文件中引入了静态资源，现在运行npm run build：

    clipboard.png

    clipboard.png

    可以看到html和css文件打包失败，提示解析html和js文件需要对应的loader。

    配置loader

    我们需要在webpack.config.js配置相应的loader来解析html和css类型的文件。html-loader可以用来解析html文件并以字符串形式传给webpack，此外还可以按需对文件进行压缩。

    npm install html-loader --save-dev

    css-loader能够解析css文件，并把解析后的css以字符串形式传给style-loader,在style-loader在html中通过创建<style>标签引入css。

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

    file-loader可以用来解析静态图片的引用，url-loader是对file-loader的进一步封装，它可以把较小的图片转化成base64,它的使用也依赖于file-loader。

    npm install file-loader url-loader --save-dev

    安装完后，重新配置webpack.config.js文件，copy以下代码到webpakc.config.js

    //webpack配置文件符合commonJs模块规范
var path = require('path'); //这里引入path是为了解析相对路径，配置文件某些路径要求是绝对路径
module.exports = {
  // 入口文件，webpack据此对项目进行打包
  // 类型： String字符串 | Array数组 | Object对象
  // lesson1很简单，只使用一个入口
  entry: './webpack.entry.js',
  // webpack的入口文件，后面会创建
  // 定义webpack打包时的输出文件名及路径
  output: {
    // 定义webpack打包之后的文件名
    filename: 'webpack.bundle.js',

    // 定义打包文件的存储路径：当前目录的build文件夹
    path: path.resolve(__dirname, './build'),

    // 声明资源（js、css、图片等）的引用路径
    // webpack打包时会把html页面上的相对路径根据publicPath解析成绝对路径
    // eg：当publicPath为'https://jd.com/'时，如果有html或者css含有一张图片相对路径为'./img/test.jpg',打包之后html（或css）中图片的路径就会变成'https://jd.com/img/test.jpg'
    publicPath: ''
  },

  // 用于解析entry选项的基础目录(必须是绝对路径)，该目录必须包含入口文件
  // 默认: process.cwd()
  context: __dirname,

  // 定义项目里各种类型模块的处理方式
  module: {
    rules: [{
      test: /\.css$/,
      // 处理.css文件
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.(jpg|png)$/,
      // 处理.png和.jpg格式的图片文件
      use: ['url-loader?limit=10000&name=img/[name].[ext]'
      // limit参数指图片大小（10kb），当小于这个值时图片转为base64，当把值修改为60000时，1.jpg（50kb）会被解析成base64，打包后查看index.html代码可以看到
      // name参数指图片文件的命名格式，前面可以加 img/ 表示图片存储路径
      ]
    },
    {
      test: /\.html$/,
      // 处理.html文件
      use: ['html-loader']
    }]
  }
};

    运行npm run build，显示打包成功。

    clipboard.png

    clipboard.png

    如上build文件夹中就是打包后生成的目录，可见所有的文件都打包到了webpack.bundle.js文件中了。

    配置plugins

    为了解决上面全部打包到了webpack.bundle.js的问题，我们可以使用html-webpack-plugin和extract-text-webpack-plugin来将html和css代码片段从webpack.bundle.js中抽取出来，并生成相应的html或css文件，extract-text-webpack-plugin会自动在生成的html文件中插入<link>标签引入css。

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

    复制以下代码到webpack.config.js:

    //webpack配置文件符合commonJs模块规范
var path = require('path'),
//这里引入path是为了解析相对路径，配置文件某些路径要求是绝对路径
HtmlWebpackPlugin = require('html-webpack-plugin'),
//简化生成适合webpack打包的html
ExtractTextPlugin = require("extract-text-webpack-plugin"); //抽取css字符串并生成css文件
module.exports = {
  // 入口文件，webpack据此对项目进行打包
  // 类型： String字符串 | Array数组 | Object对象
  // lesson1很简单，只使用一个入口
  entry: './webpack.entry.js',
  // webpack的入口文件，后面会创建
  // 定义webpack打包时的输出文件名及路径
  output: {
    // 定义webpack打包之后的文件名
    filename: 'webpack.bundle.js',

    // 定义打包文件的存储路径：当前目录的build文件夹
    path: path.resolve(__dirname, './build'),

    // 声明资源（js、css、图片等）的引用路径
    // webpack打包时会把html页面上的相对路径根据publicPath解析成绝对路径
    // eg：当publicPath为'https://jd.com/'时，如果有html或者css含有一张图片相对路径为'./img/test.jpg',打包之后html（或css）中图片的路径就会变成'https://jd.com/img/test.jpg'
    publicPath: ''
  },

  // 用于解析entry选项的基础目录(必须是绝对路径)，该目录必须包含入口文件
  // 默认: process.cwd()
  context: __dirname,

  // 定义项目里各种类型模块的处理方式
  module: {
    rules: [{
      test: /\.css$/,
      // 处理.css文件
      use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: "css-loader"
      })
    },
    {
      test: /\.(jpg|png)$/,
      // 处理.png和.jpg格式的图片文件
      use: ['url-loader?limit=10000&name=img/[name].[ext]'
      // limit参数指图片大小（10kb），当小于这个值时图片转为base64，当把值修改为60000时，1.jpg（50kb）会被解析成base64，打包后查看index.html代码可以看到
      // name参数指图片文件的命名格式，前面可以加 img/ 表示图片存储路径
      ]
    },
    {
      test: /\.html$/,
      // 处理.html文件
      use: ['html-loader']
    }]
  },

  // webpack插件
  plugins: [
    // 生成html文件
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html'
    }),

    // 生成css文件，一下括号中的'style.css' 是打包后的css文件名，可自定义
    new ExtractTextPlugin("style.css")
  ]
};

    由于已经使用html-webpack-plugin以index.html为模板生成html文件，webpack打包时会引入index.html，所以在webpack.entry.js就没有必要再次require('index.html')。修改后的webpack.entry.js如下：

    // 入口文件在浏览器端的表现类似于html代码中的 < script >
// 在这里输入 console.log('Hello world!')，能在浏览器控制台看到打印结果
// require('./src/index.html');
require('./src/style.css');
require('./src/main.js');

    运行npm run build显示打包成功：

    clipboard.png

    补充知识

    1、entry属性：根据你的项目情况，如果是SPA（single page app 单页面应用），使用字符串即一个入口即可；如果是MPA（multiple page app），建议使用Object类型，每一个属性都是一个入口，入口名称是属性的名称，入口文件是属性的值
    2、extract-text-webpack-plugin可以自定义css文件名，也可以拆分成几个css文件，详情可看官方文档。

    webpack前端
    fsrookie
    2.9k 声望256 粉丝

    目前很多文章都是摘抄记录其他教程。见谅。

    « 上一篇
    webpack包教不包会系列（1）
    下一篇 »
    webpack包教不包会系列（三）

    引用和评论

    推荐阅读
    头像
    前端路由解析以及实现（学习）

    fsrookie阅读 2.3k

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.6k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    0 条评论
    得票最新