Webpack项目模板配置浅析

最新推荐文章于 2024-09-01 07:45:30 发布

zYongheng

最新推荐文章于 2024-09-01 07:45:30 发布

阅读量193

点赞数

分类专栏： Windows编程文章标签： webpack

本文链接：https://blog.csdn.net/zyongheng/article/details/101948969

版权

Windows编程专栏收录该内容

16 篇文章 1 订阅

订阅专栏

webpack基本配置

打包最简单的CSS文件

const path = require('path');

module.exports = {
    entry: './entry.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    },
    mode: 'development'
};

__dirname的路径和CSS的路径相同

entry：输入文件
output：输出文件，只能放在同一个目录

resolve：引用路径替换，例如

    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['.js', '.vue', '.json', '.css', '.node']
    },

即将import vue from 'vue'改为import vue from 'vue/dist/vue.esm.js'

target：运行环境，一般可以写'node'

相关loader研究
相关plugin研究

webpack-cli打包配置

vue-cli脚手架

electron-cli脚手架

安装
```
vue init simulatedgreg/electron-vue
```
主进程配置

渲染进程配置

loader

less

{
    test: /\.less$/,
    use: ['vue-style-loader', 'css-loader', 'less-loader']
},

css

{
    test: /\.css$/,
    use: ['vue-style-loader', 'css-loader']
},

html

{
    test: /\.html$/,
    use: 'vue-html-loader'
},

{
    test: /\.js$/,
        use: 'babel-loader',
    exclude: /node_modules/
},

node

{
    test: /\.node$/,
        use: 'node-loader'
},

vue

{
    test: /\.vue$/,
    use: {
        loader: 'vue-loader',
        options: {
            extractCSS: process.env.NODE_ENV === 'production',
            loaders: {
                sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
                scss: 'vue-style-loader!css-loader!sass-loader',
                less: 'vue-style-loader!css-loader!less-loader'
            }
        }
    }
},

png|jpg|gif|svg

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    use: {
        loader: 'url-loader',
        query: {
            limit: 10000,
            name: 'imgs/[name]--[folder].[ext]'
        }
    }
},

mp4|mp3|wav

{
    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
    options: {
    limit: 10000,
        name: 'media/[name]--[folder].[ext]'
    }
},

woff|ttf|otf

{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    use: {
    loader: 'url-loader',
        query: {
        limit: 10000,
            name: 'fonts/[name]--[folder].[ext]'
        }
    }
}

plugin

VueLoaderPlugin

使用Vue-loader时，必须要引入这个模块

const VueLoaderPlugin = require('vue-loader/lib/plugin')
plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin()
  ]

MiniCssExtractPlugin
- 将CSS文件单独抽离出来

HtmlWebpackPlugin

var htmlWebpackPlugin = require('html-webpack-plugin')

const path = require('path')
module.exports = {
    entry: './src/script/main.js',
    output: {
        filename: 'js/bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: 'head'
        })
    ]
}

用于动态生成HTML文件

参数	简介	说明
title	标题
filename	文件名
template	依赖于哪一个html文件
inject	script标签的位置
favicon	icon资源插入
minify	文件最小化
cache	内容变化时生成一个新文件
showErrors	webpack报错时，会把错误信息包含在pre中
chunks	多文件入口，用于引入哪些JS文件
excludeChunks	排除掉哪些JS
xhtml	兼容xhtml
chunksSortMode	script排序方式

HotModuleReplacementPlugin
NoEmitOnErrorsPlus

WebpackDevServer

用来创建一个http服务器

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    entry: {
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'index.js',
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['vue-style-loader', 'css-loader']
            },
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.vue$/,
                use: {
                    loader: 'vue-loader'
                }
            },
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new htmlWebpackPlugin({
            filename: './index.html',
            template: './src/index.html'
        })
    ],
    mode: 'development',
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
        extensions: ['.js', '.vue', '.json', '.css', '.node']
    },
    devServer: {
        port: 9080,
        contentBase: './dist/test',
        index: 'main.html'
    }
};

需要安装的插件有：

{
  "name": "unit10",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "node dev-runner.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "css-loader": "^2.1.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "vue": "^2.5.21",
    "vue-loader": "^15.5.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.21",
    "webpack": "^4.28.3",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }
}

由于vue的配置完全依赖于webpack.config.js，而配置文件的entry和output这种批量生产模式无法为不同的应用区分文件夹（从html到js全部隔离），因此只能使用命令行的方式来打包。