webpack配置详解 - 30.output

2022-09-09 11:31:34 阅读：228 来源： 互联网

标签：count console 30 add js webpack output main

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中.

文档: https://www.webpackjs.com/concepts/output/

1.文件结构

2.代码

add.js

function add(x, y) {
    return x + y
}

export default add

count.js

function count(x, y) {
    return x - y
}

export default count

index.js

// import add from './add'
// import count from './count'

console.log('index.js文件加载了')

//chunkFilename 非入口文件名称
import('./add')
    //结构赋值，提取default,重命名为 add
    .then(({default:add})=>{
        console.log(add(1,2));
    })

// console.log(add(1, 2))
// console.log(count(5, 3))

webpack.config.js

const {resolve} = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: {
        //文件名称(文件名称+目录)
        filename: "js/[name].js",
        //输出文件目录(将来所有资源输出的公共目录)
        path: resolve(__dirname, 'build'),
        //所有资源引入公共路径的前缀(一般用于生产环境) --> 'img/a.jpg' --> '/imgs/a.jpg'   |  src="js/main.js" --> src="/js/main.js"
        publicPath: "/",
        chunkFilename: "js/[name]_chunk.js",// 非入口chunk的名称 (entry 指定的文件，就叫入口chunk)
        library: '[name]',// 整个库向外暴露的变量名 (打包生成的 main.js)
        // libraryTarget: 'window' // 变量名添加到哪个上 browser (window["main"])
        // libraryTarget: 'global' // 变量名添加到哪个上 node
        // libraryTarget: 'commonjs'//以 commonsjs 语法暴露 (exports["main"])
    },
    plugins: [new htmlWebpackPlugin()],
    mode: 'development'
}

3.打包

$ webpack

end~

标签：count,console,30,add,js,webpack,output,main
来源： https://www.cnblogs.com/sener/p/16672197.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

webpack配置详解 - 30.output