V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Reming960227
V2EX  ›  Vue.js

webpack4 打包 library

  •  
  •   Reming960227 · 2019-05-13 07:05:36 +08:00 · 2073 次点击
    这是一个创建于 2020 天前的主题,其中的信息可能已经有所发展或是发生改变。
    webpack 配置
    const path = require('path');
    const webpack = require('webpack');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    const CleanWebpackPlugin = require('clean-webpack-plugin');

    module.exports = {
    entry: './packages/index.js',
    output: {
    path: path.resolve(__dirname, './lib'),(输出路径)
    filename: './atomD.min.js',(输出文件)
    library: 'atomD',(设置库名)
    libraryTarget: 'umd',(设置 library 规范)
    globalObject: 'this',(设置全局环境)
    umdNamedDefine: true(umd 规范中输出 amd 的命名)
    },
    externals: {
    vue: {(抽取 vue )
    root: 'Vue',
    commonjs: 'vue',
    commonjs2: 'vue',
    amd: 'vue'
    }
    },
    module: {
    rules: [
    {
    test: /\.js$/,
    loader: 'eslint-loader',
    enforce: 'pre',
    exclude: path.resolve(__dirname, '/node_modules')
    },
    {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: path.resolve(__dirname, '/node_modules')
    },
    {
    test: /\.css$/,
    use: [
    MiniCssExtractPlugin.loader,(抽取 css,必须要有 css-loader,其他 loader 要在 css-loader 之后)
    'css-loader',
    'postcss-loader'
    ]
    }]
    },
    resolve: {
    extensions: ['.js'](默认文件扩展)
    },
    plugins: [
    new CleanWebpackPlugin(),(清空之前打包的文件)
    new MiniCssExtractPlugin({filename: 'style.css'})(抽取 css)
    ]
    }

    一套 vue 移动端 的 组件 库
    https://github.com/Reming960227/atom-design(点个 star, 谢谢)
    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2457 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 18ms · UTC 15:40 · PVG 23:40 · LAX 07:40 · JFK 10:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.