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打包时，会根据入口找依赖，只有依赖的包才会被打包。
  webpack会形成一个叫依赖图的东西，只有在依赖图中的东西才会被打包。
  所以i -S和i -D位置错误，打包也不会有问题，为了规范位置尽量不要错误

 四、概念

　　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：开发环境下使用，代码量多
};

　　6、文件扩展名和别名

resolve:{
    extensions:['.js','.jsx','.json'],    //表示在import 文件时文件后缀名可以不写
    alias:{
        '@':path.join(__dirname,'./src')    
        //表示设置路径别名这样在import的文件在src下的时候可以直接 @/component/...
    }
}

五、自动化导入模块

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