webpack使用

一、安装

　　webpack安装需要nodejs环境支持，推荐本地开发环境安装

npm i webpack webpack-cli -D

二、初始化项目

npm init

　　生成package.json文件并配置

"scripts": {
    "build": "webpack"
}

三、创建webpack.config.js文件并配置

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}; 

　　运行npm run build命令即可使用webpack打包

 四、概念

　　webpack.config.js文件的主要配置项

　　1、入口（entry）

module.exports = {
    entry: './src/index.js'
};

　　2、出口（output）

const path = require('path');

module.exports = {
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
};

　　3、loader

module.exports = {
　　module: {
　　　　rules: [{
　　　　　　test: /\.txt$/, // 正则表达式用以匹配文件
　　　　　　use: 'raw-loader'
　　　　}]
　　}
};

　　4、插件（plugins）

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装

module.exports = {
　　plugins: [
　　　　new HtmlWebpackPlugin({template: './index.html'})
　　]
};

　　5、模式

module.exports = {
　　mode: 'production' // production：生产环境下使用，代码量少；development：开发环境下使用，代码量多
};

五、自动化导入模块

//参数1：目录路径
//参数2：是否递归目录
//参数3：文件匹配正则表达式
let reqAll = require.context('./module', true, /\.js$/)
reqAll.keys().map(li => {
    console.log(reqAll(li))
})