webpack介绍

时间 2019-11-17

标签 webpack 介绍繁體版

原文原文链接

1.为何咱们须要打包？css

模块化
优化加载速度
使用新的开发模式

2.webpack特色html

同时支持CommonJs和AMD
一切均可以打包
分模块打包

3.正式使用webpack前的准备webpack

全局安装webpack：npm install webpack -g
建立工程目录：mkdir webpack-test
进入工程目录：cd webpack-test
初始化工程信息： npm init 或 npm init -y
安装依赖工具：npm install
将webpack打包工具依赖进来：npm install --save-dev webpack
在工程根目录下建立 index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Webpack-test</title>
</head>
<body>
    <script src="bundle.js"></script>
</body>
</html>

4.打包js文件web

在工程根目录下建立src文件夹，在src文件夹中建立 index.js

document.write('hello webpack!');

在工程根目录下建立webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

在工程根目录下建立dist文件夹，将index.html文件拷贝到dist文件夹下

在工程目录下执行webpack --config webpack.config.js
运行dist文件夹下面的index.html文件能够看到运行结果
PS：设置npm脚本调整package.json ，运行命令npm run build

{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}

5.打包css文件正则表达式

将css-loader和style-loader依赖进来：npm install --save-dev css-loader style-loader
在src文件加下建立style.css , 而且编写相关样式
在webpack.config.js文件中作以下配置：

const path = require('path');

module.exports = {
    //入口
    entry: './src/index.js',
    //输出
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    //模块处理
    module: {
        loaders: [{
            //使用正则表达式检测文件后缀名
            test: /\.css$/,
            //使用两个loader处理css文件，先执行css-loader(对css文件读取，处理url),再执行style-loader(读取css文件应用到页面上，即显示样式)
            loaders: ['style-loader', 'css-loader']
        }]
    }
};

在src文件夹下的index.js添加代码：

require('./style.css');

控制台运行命令：npm run build
刷新浏览器页面

6.加载图片：npm install --save-dev file-loadernpm

7.加载字体json

8.加载数据：npm install --save-dev csv-loader xml-loader浏览器