webpack配置详解 - 30.output

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~