webpack配置详解 - 31.module

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。

loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

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'),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                // 多个loader用use
                use:['style-loader','css-loader']
            },
            {
                test: /\.js$/,
                //排除 node_modules 下的js文件
                exclude: /node_modules/,
                //只检查 src 下的js文件
                include: resolve(__dirname,'src'),
                //优先执行
                enforce: "pre",

                //不声明 enforce 就是中间执行

                // 延后执行
                // enforce:'post',
                // 单个loader用loader
                loader: 'eslint-loader',
                options: {}
            },
            //以下配置只有一个会生效
            {
                oneOf: []
            }
        ]
    },
    plugins: [new htmlWebpackPlugin()],
    mode: 'development'
}

 

3.打包

$ webpack