webpack基本使用（一）

---

highlight: github

webpack的配置总是忘记，在掘金记录一下基础配置

1.首先需要下载的依赖

npm init -y //初始化
npm i webpack webpack-cli -D //这两个是webpack最基本的依赖

在package.json中添加script脚本build: webpack

2.创建webpack.config.js

该文件应该遵循commonjs暴露一个对象

主要有以下配置：

• entry：入口文件，指示 webpack 应该使用哪个模块
• output: 打包输出的配置
• module（loader）: 配置处理其他文件（非js和json文件）
• plugin: loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
• mode：设置生产环境production和开发环境development
  基本目录环境（例子使用了TS）：

├─node_modules
├─src 
│ ├─app.ts
│ ├─index.ts 
│ └─index.html
├─package.json
├─tsconfig.json
└─webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:'./src/index.ts',//入口文件
    output:{ // output
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module:{ //loader
        rules: [
            {
                test: /.ts$/,
                use:'ts-loader',
                exclude:/node_modules/
            }
        ]
    },
    plugins:[ //plugins
        new HtmlWebpackPlugin({
            template:'./src/index.html',
        })
    ],
    mode:'development'
}

3.简单的打包

配置好以上内容后就可以打包了，只需终端运行npm run build即可自动打包

危！由于这个例子使用了TS,在使用模块化的时候出现了个问题

TS使用模块化引入文件的时候不能添加后缀名

但是不使用后缀名默认引入的是js文件导致编译报错

此时需要添加webpack配置

module.exports = {
    ...
    resolve:{
        extensions:['.ts','.js'] //按顺序解析后缀名
    },
    ...
}

此时再运行npm run build即可打包。