自动化构建工具webpack

时间:2020-05-01

新建项目

在项目根目录初始化

npm init

安装插件

npm install webpack -g 

npm install webpack --save-dev

新建入口文件,entry.js

document.write('entry.js');
module.exports = {};

新建index.html文件,dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>

执行

webpack src/js/entry.js -o  dist/bundle.js

打开页面查看效果

创建math.js文件

export function add(a, b) {
    return a + b;
}

export function sum(a, b) {
    return a * b;
}

创建json文件,data.json

{
  "name": "我要找答案",
  "url": "https://www.wyzda.com"
}

修改entry.js文件

import {add, sum} from "./math";
import data from '../json/data.json';

console.log(add(1, 1));
console.log(sum(1, 3));

console.log(data);



document.write('entry.js');

执行

webpack src/js/entry.js -o  dist/bundle.js

查看页面效果

webpack配置文件

项目根目录创建文件webpack.config.js

const path = require('path'); //path内置的模块,用来设置路径。

module.exports = {
    entry: './src/js/entry.js',   // 入口文件
    output: {                     // 输出配置
        filename: 'bundle.js',      // 输出文件名
        path: path.resolve(__dirname, 'dist')   //输出文件路径配置
    }
};

修改package.json文件

{
  "name": "webpack_test",
  "version": "1.0.0",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11"
  }
}

执行

npm run build

打包css和图片文件

安装插件

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

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

url-loader是对象file-loader的上层封装,使用时需配合file-loader使用

修改webpack.config.js文件

const path = require('path'); //path内置的模块,用来设置路径。

module.exports = {
    entry: './src/js/entry.js',   // 入口文件
    output: {                     // 输出配置
        filename: 'bundle.js',      // 输出文件名
        path: path.resolve(__dirname, 'dist')   //输出文件路径配置
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            }
        ]
    }
};

修改test.css文件

#box1{
    width: 300px;
    height: 300px;
    background-image: url("../image/logo.jpg");
}
#box2{
    width: 300px;
    height: 300px;
    background-image: url("../image/big.jpg");
}

修改entry.js

import {add, sum} from "./math";
import data from '../json/data.json';
import '../css/test.css';

console.log(add(1, 1));
console.log(sum(1, 3));

console.log(data);



document.write('entry.js');

修改index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<script src="bundle.js"></script>
</body>
</html>

执行

webpack

热加载

安装插件

npm install --save-dev webpack-dev-server

修改webpack.config.js

const path = require('path'); //path内置的模块,用来设置路径。

module.exports = {
    entry: './src/js/entry.js',   // 入口文件
    output: {                     // 输出配置
        filename: 'bundle.js',      // 输出文件名
        path: path.resolve(__dirname, 'dist')   //输出文件路径配置
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            }
        ]
    },
    devServer: {
        contentBase: './dist'
    }
};

修改package.json文件

{
  "name": "webpack_test",
  "version": "1.0.0",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },
  "devDependencies": {
    "css-loader": "^3.4.2",
    "file-loader": "^6.0.0",
    "style-loader": "^1.1.3",
    "url-loader": "^4.0.0",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

执行

npm start

现在可以动态修改文件了,页面会自动刷新

使用webpack插件

  • 使用html-webpack-plugin根据模板html生成引入script的页面
  • 使用clean-webpack-plugin清除dist文件夹
  • 使用uglifyjs-webpack-plugin压缩打包的js文件

安装插件

npm install html-webpack-plugin clean-webpack-plugin  --save-dev 

修改webpack.config.js文件

const path = require('path'); //path内置的模块,用来设置路径。

const HtmlWebpackPlugin = require('html-webpack-plugin'); //自动生成html文件的插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin'); //清除之前打包的文件

module.exports = {
    entry: './src/js/entry.js',   // 入口文件
    output: {                     // 输出配置
        filename: 'bundle.js',      // 输出文件名
        path: path.resolve(__dirname, 'dist')   //输出文件路径配置
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            }
        ]
    },
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new HtmlWebpackPlugin({template: './index.html'}),
        new CleanWebpackPlugin(),
    ]
};

将dist文件夹内的index.html文件移动到项目根目录

然后执行

webpack

打开dist文件夹内的index.html查看效果