webpack前端自动化构建工具

webpack首先需要本地环境node.js的支持

1. 配置node.js环境安装配置说明

www.runoob.com/nodejs/node…

2. 使用 cnpm 全局安装 webpack：

全局安装webpack

//全局安装
cnpm install webpack -g
复制代码

3. 使用 cnpm 项目内安装 webpack：

新建一个demo文件夹，然后再将命令行切换到当前目录下，执行如下命令

//局部安装
npm  init  -y
npm  install webpack --save-dev
复制代码

4. 项目框架及简单实例

捕获.PNG

index.html文件绑定bundle.js
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <!-- 此时bundle.js还未自动生成 -->
    <script src="https://juejin.cn/post/dist/bundle.js"></script>
</body>
</html>
复制代码

webpack.config.js通过bundle.js调用全局js
webpack.config.js

const  path = require('path');

module.exports = {
    //关联到的绑定所需功能的js
    entry: './js/test.js',
    //在dist文件夹中生成bundle.js文件
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}
复制代码

test.js负责命名系统功能

执行指令

webpack --mode development

5. 根据模板生成index.html

需要使用webpack的插件html-webpck-plugin

npm install --save-dev html-wbpack-plugin

webpack.config.js

const  path = require('path');
const  HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    //关联到的绑定所需功能的js
    entry:'./js/test.js',
    //在dist文件夹中生成bundle.js文件
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    //在dist文件夹中生成index.html
    plugins:[
        new HtmlWebpackPlugin({
            filename:'./index.html',
           template:'index.html'
        })
    ]  
}
复制代码

修改index.html，去掉bundle.js的引用
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">    
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: yellow;
        }
    </style>
</head>
<body>    
</body>
</html>
复制代码

执行指令

webpack --mode development

在dist目录下生成了以webpackTest/index.html为模板的index.html

6. 加载CSS文件

style.css

body {
    background-color: yellow;
    color:red;
}
复制代码

然后再test.js文件中，我们引入相应的样式
test.js

import  style from './css/style.css'
document.write("hello  world");
复制代码

加载css文件需要使用css-loader,以及style-loader，需要使用npm进行安装

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

webpack.config.js文件的配置

const  path = require('path');
const  HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    //关联到的绑定所需功能的js
    entry:'./js/test.js',
    //在dist文件夹中生成bundle.js文件
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    //样式打包进bundle.js脚本中
    module: {
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },
    //在dist文件夹中生成index.html
    plugins:[
        new HtmlWebpackPlugin({
            filename:'./index.html',
           template:'index.html'
        })
    ]  
}

复制代码

最后执行

webpack --mode development

7. 加载图片

style.css

body {
    background-color: yellow;
    color:red;
    background-image: url('../img/test.jpg');
}
复制代码

项目框架

捕获222.PNG

这里我们使用的是url-loader，同时我们还需要file-loader来加载文件。

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

webpack.config.js

const  path = require('path');
const  HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    //关联到的绑定所需功能的js
    entry:'./js/test.js',
    //在dist文件夹中生成bundle.js文件
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module: {
        rules:[
            //样式打包进bundle.js脚本中
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            //在dist中自动生成images文件夹，储存静态图片
            {
                test:/\.(jpg|png|gif)$/,
                use:[{
                    loader:'url-loader',
                    options:{
                        outputPath:'./images/',
                        limit:500
                    }
                }]
            }
        ]
    },
    //在dist文件夹中生成index.html
    plugins:[
        new HtmlWebpackPlugin({
            filename:'./index.html',
           template:'index.html'
        })
    ]  
}
复制代码

执行指令webpack --mode development

dist文件夹下多了一个images文件夹

8. CSS文件的分离

将样式文件进行分离，需要使用webpack的插件extract-text-webpack-plugin

npm install --save-dev extract-text-webpack-plugin@next

webpack.config.js

//导入插件
const  path = require('path');
const  HtmlWebpackPlugin = require('html-webpack-plugin');
const  ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    //关联到的绑定所需功能的js
    entry:'./js/test.js',
    //在dist文件夹中生成bundle.js文件
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module: {
        rules:[
            //样式打包进bundle.js脚本中
            {
                test:/\.css$/,
                use:ExtractTextPlugin.extract({
                    fallback:'style-loader',
                    use:'css-loader'
                })
            },
            //在dist中自动生成images文件夹，储存静态图片
            {
                test:/\.(jpg|png|gif)$/,
                use:[{
                    loader:'url-loader',
                    options:{
                        outputPath:'./images/',
                        limit:500,
                        publicPath:'../images'
                    }
                }]
            }
        ]
    },
    
    plugins:[
        //在dist文件夹中生成index.html
        new HtmlWebpackPlugin({
            filename:'./index.html',
           template:'index.html'
        }),
        //在dist文件夹中生成css文件夹
        new ExtractTextPlugin('css/[name].[hash:8].css')
    ]  
}
复制代码

将样式文件单独抽离出来，图片原本的路劲肯定是发生的改变，此时需要在url-loader中配置publicPath为’../images’

执行webpack –mode development

dist下多了一个css文件夹

9. 热更新和自动刷新

需要使用webpack-dev-server，webpack-dev-server依赖于webpack-cli

（webpack-dev-server是一个基于Node.js和webpack的一个小型服务器）

需要安装webpack-dev-server、webpack-cli

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

webpack.config.js

//导入插件
const  path = require('path');
const  HtmlWebpackPlugin = require('html-webpack-plugin');
const  ExtractTextPlugin = require('extract-text-webpack-plugin');
//热更新和自动刷新
const  webpack = require('webpack');


module.exports =
 {
    //关联到的绑定所需功能的js
    entry: './src/main.js',
    //在dist文件夹中生成bundle.js文件
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    //热更新和自动刷新
    devServer: {
        inline: true,
        hot: true,
        host: '0.0.0.0',
        port: 9000,
        contentBase: path.resolve(__dirname, '/dist'),
        compress: true
    },
    module: {
        rules: [
            //样式打包进bundle.js脚本中
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                })
            },
            //在dist中自动生成images文件夹，储存静态图片
            {
                test: /\.(jpg|png|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        outputPath: './images/',
                        limit: 500,
                        publicPath: '../images'
                    }
                }]
            }
        ]
    },
    plugins: [
        //在dist文件夹中生成index.html
        new HtmlWebpackPlugin({
            filename: './index.html',
            template: 'index.html'
        }),
        //在dist文件夹中生成css文件夹
        new ExtractTextPlugin('css/[name].[hash:8].css'),
        //热更新和自动刷新
        new webpack.HotModuleReplacementPlugin()
    ]
}
复制代码

更改package.json文件

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": " webpack-dev-server --mode  development "
  },
复制代码

执行`npm run dev`,在浏览器打开localhost:9000,css样式不会发生变化

我们的样式是通过`extract-text-webpack-plugin`进行分离到单独的css文件，但是`HotModuleReplacementPlugin`只会去监听js脚本的变化

只要不使用`extract-text-webpack-plugin`加载css即可

10. 配置映射

文章版权归作者所有，未经允许请勿转载。

THE END

开发工具

整数反转

Docker命令之使用

SHOUTcast Server缓冲区溢出漏洞

Teca Diary Personal Edition Functions.PHP SQL注入漏洞

黄金搭档 — JS 装饰器（Decorator）与Node.js路由

Aruba Networks ArubaOS 远程命令注入漏洞

webpack前端自动化构建工具–引导

1. 配置node.js环境安装配置说明

2. 使用 cnpm 全局安装 webpack：

3. 使用 cnpm 项目内安装 webpack：

4. 项目框架及简单实例

5. 根据模板生成index.html

6. 加载CSS文件

7. 加载图片

8. CSS文件的分离

9. 热更新和自动刷新

执行`npm run dev`,在浏览器打开localhost:9000,css样式不会发生变化

我们的样式是通过`extract-text-webpack-plugin`进行分离到单独的css文件，但是`HotModuleReplacementPlugin`只会去监听js脚本的变化

只要不使用`extract-text-webpack-plugin`加载css即可

10. 配置映射

整数反转

Docker命令之使用

SHOUTcast Server缓冲区溢出漏洞

Teca Diary Personal Edition Functions.PHP SQL注入漏洞

黄金搭档 — JS 装饰器（Decorator）与Node.js路由

Aruba Networks ArubaOS 远程命令注入漏洞

webpack前端自动化构建工具–引导

1. 配置node.js环境安装配置说明

2. 使用 cnpm 全局安装 webpack：

3. 使用 cnpm 项目内安装 webpack：

4. 项目框架及简单实例

5. 根据模板生成index.html

6. 加载CSS文件

7. 加载图片

8. CSS文件的分离

9. 热更新和自动刷新

执行npm run dev,在浏览器打开localhost:9000,css样式不会发生变化

我们的样式是通过extract-text-webpack-plugin进行分离到单独的css文件，但是HotModuleReplacementPlugin只会去监听js脚本的变化

只要不使用extract-text-webpack-plugin加载css即可

10. 配置映射

执行`npm run dev`,在浏览器打开localhost:9000,css样式不会发生变化

我们的样式是通过`extract-text-webpack-plugin`进行分离到单独的css文件，但是`HotModuleReplacementPlugin`只会去监听js脚本的变化

只要不使用`extract-text-webpack-plugin`加载css即可