webpack的基本构建和使用

webpack的基本构建和使用

首先应该先安装webpack

npm install webpack //安装webpack

创建一个webpack.config.js文件，对webpack进行基本的配置

const path=require('path')//引入路径模块，方便对路径进行操作
//导出模块
module.exports={
//打包的入口文件
entry:'./index.js',
//打包的出口文件
 output: {
        path: path.join(__dirname, 'dist'), //打包的输出文件名字和位置
        filename: 'main.js' //打包的输出名字
    },
    }

上述就是最基本的配置
然后如果需要处理一些css文件或者图片的话，还需要用到loader如下

 //loader 可以使你在 import 或"加载"模块时预处理文件
    module: {
        //规则，应该先引入style-loader再引入css-loader
        // use里解析的过程是，由下到上，由右到左
        rules: [{
                test: /\.css$/,
                use: 'style-loader'
            }, {
                test: /\.css$/,
                use: 'css-loader'
            },
            // 匹配图片文件
            {
                test: /\.(jpg|png|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        // 图片小于8Kb，base64处理，减少了请求数量，会使体积更大
                        limit: 8 * 1024,
                        // url-loader的es6模块化解析，关闭
                        esModule: false,
                        // [hash:10]取图片hash的前10位，[ext]取图片的扩展名
                        name: '[hash:10].[ext]'
                    },
                },
            }, {
                test: /\.html$/,
                loader: 'html-loader'
            }
        ]
    },

将.html文件和.js文件绑定用到插件
需要实现引入模块

//引入插件html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')

 plugins: [
        //调用模块化引入的方法HtmlWebpackPlugin
        new HtmlWebpackPlugin({
            template: './one.html'
        })

热更新的实现
需要先安装webpack-dev-server

npm install webpack-dev-server

 //实现热更新
    devServer: {
        // 将 dist 目录下的文件 serve 到 localhost:8080 下
        // contentBase项目构建的路径
        contentBase: './dist',
        // 启动gzip压缩
        compress: true,
        // 打开的端口号为3000
        port: 3000,
        // 是否自动打开
        open: true
    },

webpack.config.js的整体代码和项目结构

const path = require('path')
//引入插件html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
//webpack可以处理js文件、json文件
module.exports = {
    mode: "development", //开发模式，development是开发者模式，production是发布环境，会对生成的项目进行打包
    entry: './index.js', //打包的入口文件
    output: {
        path: path.join(__dirname, 'dist'), //打包的输出文件名字和位置
        filename: 'main.js' //打包的输出名字
    },
    //loader 可以使你在 import 或"加载"模块时预处理文件
    module: {
        //规则，应该先引入style-loader再引入css-loader
        // use里解析的过程是，由下到上，由右到左
        rules: [{
                test: /\.css$/,
                use: 'style-loader'
            }, {
                test: /\.css$/,
                use: 'css-loader'
            },
            // 匹配图片文件
            {
                test: /\.(jpg|png|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        // 图片小于8Kb，base64处理，减少了请求数量，会使体积更大
                        limit: 8 * 1024,
                        // url-loader的es6模块化解析，关闭
                        esModule: false,
                        // [hash:10]取图片hash的前10位，[ext]取图片的扩展名
                        name: '[hash:10].[ext]'
                    },
                },
            }, {
                test: /\.html$/,
                loader: 'html-loader'
            }
        ]
    },
    //实现热更新
    devServer: {
        // 将 dist 目录下的文件 serve 到 localhost:8080 下
        // contentBase项目构建的路径
        contentBase: './dist',
        // 启动gzip压缩
        compress: true,
        // 打开的端口号为3000
        port: 3000,
        // 是否自动打开
        open: true
    },
    plugins: [
        //调用模块化引入的方法HtmlWebpackPlugin
        new HtmlWebpackPlugin({
            template: './one.html'
        })
    ]
}