webpack 的使用

最新推荐文章于 2023-12-24 21:20:52 发布

原创最新推荐文章于 2023-12-24 21:20:52 发布 · 338 阅读

0 ·

CC 4.0 BY-SA版权

前端，webpack 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Webpack进行HTML页面的资源编译，包括图片、JS文件的处理及压缩，并生成新的HTML页面。

本例子实现HTML页面中的img引入编译，外部js引入，jquery引入，js压缩，新的HTML页面生成

实现本地的index.html文件编译成新的HTML文件（dist目录下）

本例子是只有一个页面，多页面的。。还没研究

s1:创建目标文件夹，进入文件夹下本地安装webpack

cnpm intsall --save-dev webpack

s2:安装本地依赖

cnpm install --save-dev ***********

"devDependencies": {
  "clean-webpack-plugin": "^0.1.16",
  "css-loader": "^0.28.4",
  "file-loader": "^0.11.2",
  "html-loader": "^0.4.5",
  "html-webpack-plugin": "^2.29.0",
  "jquery": "^3.2.1",
  "style-loader": "^0.18.2",
  "webpack": "^3.3.0"
},

完成后如上如上(package.json中)

s3:为了编译代码简洁使用npm run build(生产环境下)在package.json中添加

"scripts": {
  "build": "webpack"
}

s4:下面是我的webpack.config.js的配置

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');


module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.[hash].js',
        path: path.resolve(__dirname, 'dist')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            { //设置输出图片的路径
                test:/\.(png|svg|jpg|gif)$/,
                use:[
                    'file-loader?name=img/[name].[hash].[ext]'
                ]
            },
            { //将HTML页面中的img引入的资源编译
                test: /\.html$/,
                use:["html-loader"]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new webpack.ProvidePlugin({
            jQuery: "jquery",
            $: "jquery"
        }),
        new HtmlWebpackPlugin({//编译为新的HTML文件
            filename: 'index.[hash].html',
            template: 'index.html', // html模板路径,模板路径是支持传参调用loader的,
            inject: 'body', //打包之后的js插入的位置，true/'head'/'body'/false,
            title: '一元试听'
        }),
        new webpack.optimize.UglifyJsPlugin({//实现js文件压缩
            compress: {
                warnings: false
            }
        })
    ]

};

下图为 npm run build运行后的结果