webpack配置多页面项目

相信经常使用webpack的人已经深刻体验到自动化工具给我们带来的便利。我自己最常用的是vue,平时就是使用vue-cli或者nuxt构建的项目，聪明的前辈已经为我们配好了项目，可以让我们不必去配置就可以轻松使用。

然而在真正的项目中，我们常常需要写一些简单的页面，并不基于vue这样比较大的框架，比如我明天上班就要做的这个公众号介绍，只有几个页面，但是我又希望能使用webpack来辅助我更好完成工作，在今后的工作中也基于这个demo来进行开发，所以今天就来简单的配置一下webpack。

我现在做的这个项目只有简单的两个页面，不基于任何框架。

about.html,

contact.html

1-npm init webpack-config-demo 初始化项目

2-新建webpack.config webpack配置文件

3.在webpack.config写入配置，我的基础配置如下：

var webpack = require('webpack');
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    // 配置入口
    entry: {
        about: './src/pages/about/about.js',
        contact: './src/pages/contact/contact.js'
    },
    // 配置出口
    output: {
        path: __dirname + "/dist/",
        filename: 'js/[name]-[hash:5].js',
        publicPath: '/',
    },
   
    module: {
        loaders: [
            //解析.js
            {   
                test: '/\.js$/',  
                loader: 'babel',  
                exclude: path.resolve(__dirname, 'node_modules'), 
                include: path.resolve(__dirname, 'src'),
                query: {
                    presets: ['env'] 
                }
            },
            // css处理
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader' 
               
            },
            // less处理
            { 
                test: /\.less$/,
                loader: 'style-loader!css-loader!less-loader'
            },
            // 图片处理
            { 
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',

                query: {
                    name: 'assets/[name]-[hash:5].[ext]'
                },
            },{
                test: /\.(htm|html)$/i,
                use:[ 'html-withimg-loader'] 
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin(__dirname + '/assert/css/common.less'),
        //  minify:{
        //     removeComments: true,//删除注释
        //     collapseWhitespace:true//删除空格
        // }
        new HtmlWebpackPlugin({
            filename: __dirname + '/dist/about.html',
            inject: 'head',
            template: 'html-withimg-loader!'+__dirname + "/src/pages/about/about.html",
            chunks: ['about'],
            inlineSource: '.(js|css)$'
        }),
        new HtmlWebpackPlugin({
            inject: 'head',
            filename: __dirname + '/dist/contact.html',
            template: __dirname + "/src/pages/contact/contact.html",
            chunks: ['contact'],
            inlineSource: '.(js|css)$'
        }),
        //设置每一次build之前先删除dist
        new CleanWebpackPlugin(
            ['dist/*', 'dist/*',],　     //匹配删除的文件
            {
                root: __dirname,       　　　　　　　　　　//根目录
                verbose: true,        　　　　　　　　　　//开启在控制台输出信息
                dry: false        　　　　　　　　　　//启用删除文件
            }
        )
    ],
    // 起本地服务，我起的dist目录
    devServer: {
        contentBase: "./dist/",
        historyApiFallback: true,
        inline: true,
        hot: true,
        host: '192.168.1.107',//我的局域网ip
    }
}

4-在package.json中配置npm 命令

 "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --hot --inline  --watch"
  },

意思是执行npm run build的时候执行webpack的打包，

执行npm run dev的时候本地起一个服务器，--host --watch实现热加载。

注意：起的ip你可以在以下：

// 起本地服务，我起的dist目录
    devServer: {
        contentBase: "./dist/",
        historyApiFallback: true,
        inline: true,
        hot: true,
        host: '192.168.1.107',//我的局域网ip
    }

中配置你的host,然后在局域网中可以通过这个地址访问到你的项目，我指的是，同个局域网中的，在调试移动端真机的时候就很有用，比如 your phone。热加载可以让你实现多端自动刷新，很方便。

目录如下：

本次项目是简单基础的配置，不过已经满足了我本次项目的需求。在后续的工作中还会根据需要再配置，并实时更新github。

项目地址：https://github.com/nongweiyi/webpack-config-demo

与我交流：653324597

预览：

https://nongweiyi.github.io/webpack-config-demo/dist/about.html

https://nongweiyi.github.io/webpack-config-demo/dist/contact.html

webpack配置多页面项目

猜你喜欢