webpack

一. css资源管理
二. 加载图像资源

webpack官网手册案例用到lodash. lodash是一个javascript工具库,就和平时写代码前要加载js的道理是一样

npm install --save lodash

要尝试lodash,可以在index.js中加上如下代码

console.log(_.repeat('*', 3)); //打印3个星星

用命令构建

./node_modules/.bin/webpack src/index.js dist/bundle.js

执行webpack 把开发环境下的index.js 构建为生产环境需要的bundle.js.

用配置文件构建
1.项目根目录下创建一个webpack.config.js文件
2.配置文件设置如下代码:

//套路
const path = require('path');
module.exports = {
  //输入       
  entry: './src/index.js',
  //输出
  output: {
    //输出的文件名
    filename: 'bundle.js',
    //输出路径
    path: path.resolve(__dirname, 'dist')
  }
};

3.执行命令

 ./node_modules/.bin/webpack --config webpack.config.js

用npm的别名来构建
1.找到package.js

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    //别名可以随便起
    //官网写的是 "build":"webpack",用的时候就是npm run build
    "webpack":"webpack"
  },

2.用别名执行命令

npm run webpack //这样比写./node_modules/.bin/webpack 节约时间

一. css资源管理

配置web.config.js

//套路
const path = require('path');
module.exports = {
  //输入       
  entry: './src/index.js',
  //输出
  output: {
    //输出的文件名
    filename: 'bundle.js',
    //输出路径
    path: path.resolve(__dirname, 'dist')
  },
  //增加了模块部分处理css和less
  module: {
      //规则
     rules: [
       {
         //正则表达式,以.css结尾的文件,使用style-loader css-loader
         test: /\.css$/,
         use: [
           'style-loader',
           'css-loader'
         ]
       },
       {
         test: /\.less$/,
         use: [{
             loader: "style-loader" // creates style nodes from JS strings
         }, {
             loader: "css-loader" // translates CSS into CommonJS
         }, {
             loader: "less-loader" // compiles Less to CSS
         }]
       }
     ]
   }
};

要加载css需要在模块中设置规则.以.css结尾的文件使用什么处理,以.less结尾的文件用什么处理.
webpack本身不能处理css,需要安装style-loader和css-loader

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

如果要用到到less,还需要装 less-loader

npm install --save-dev less-loader

不止可以处理css 还可以处理less,sass,postcss 也可以参考postcss详解

二. 加载图像资源

npm 安装file-loader

npm install --save-dev file-loader

webpack.config.js 文件做如下配置

//套路
const path = require('path');
module.exports = {
  //输入       
  entry: './src/index.js',
  //输出
  output: {
    //输出的文件名
    filename: 'bundle.js',
    //输出路径
    path: path.resolve(__dirname, 'dist')
  },
  module: {
      //规则
     rules: [
       {
         test: /\.(png|svg|jpg|gif)$/,
         use: [
           'file-loader',
           'image-webpack-loader' //注意官网demo有问题.必须引入这个包才能处理图片
         ]
       }
     ]
   }
}

index.js import MyImage from ‘图片路径’ MyImage就是最终处理后的图片路径.之后的js代码中使用图片路径就要用它

import _ from 'lodash';
import './style.css';
import Icon from './hello.png';
function component() {
  var element = document.createElement('div');
  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello');
  // Add the image to our existing div.
   var myIcon = new Image();
   myIcon.src = Icon;
   element.appendChild(myIcon);
  return element;
}
document.body.appendChild(component());
console.log(_.repeat('*', 3));

了解缩小和优化图像的包
image-webpack-loader url-loader

三. 加载字体资源

以Font Awesome 为例,步骤如下:

1. 安装font-awesome-webpack 及其所有的依赖

npm install font-awesome-webpack less less-loader css-loader style-loader file-loader font-awesome url-loader

这些依赖一个都不能少

2. 配置webpack.config.js 官网代码有误.修改如下

//套路
const path = require('path');
module.exports = {
  //输入       
  entry: './src/index.js',
  //输出
  output: {
    //输出的文件名
    filename: 'bundle.js',
    //输出路径
    path: path.resolve(__dirname, 'dist')
  },
  module: {
      //规则
     rules: [
       //解决字体图标问题  
       {
        test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
         use: [
           'url-loader?limit=10000&mimetype=application/font-woff',
         ]
       },
       {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
         use: [
           'file-loader'
         ]
       }
     ]
   }
}

3. js入口文件加上如下代码

require("font-awesome-webpack");

4. 测试

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<!-- 如果显示效果 配置正常 -->
<i class="fa fa-camera-retro fa-5x"></i>
<script src="bundle.js"></script> 
</body>
</html>

参考 font-awesome-webpack 可能明天又出问题.随时做好修改准备
源码地址:https://github.com/zxhnext/webpack