webpack安装

安装

1. 安装node.js和npm
2. 创建空目录和package.json

   mkdir my-project
   cd my-project
   npm init -y
   

3. 安装webpack和webpack-cli：npm install webpack webpack-cli -D 通过webpack -v检查是否安装成功

webpack基础配置和使用

指定配置文件

• 默认配置文件：webpack.config.js
• 可以通过webpack --config来指定配置文件。 比如webpack --config webpack.dev.config.js

webpack基础配置

```
module.exports = {
//用来指定当前的构建环境，它会默认开启对应环境的一些参数和一些插件的功能
mode: 'development',
//指定打包入口文件
entry: {
  index:  path.join(__dirname, '../src/index.js'),
},
//指定打包的输出
output: {
    //输出文件存放的目录，必须是绝对路径，比如：output输出的js、url-loader解析的图片、HtmlWebpackPlugin生成的html文件等都会存放在以path为基础的目录下。
    path: path.join(__dirname, '../dist'),
    // 输出文件的名称
    filename: '[name]/[name].[contenthash].js',
    //发布到线上的所有资源的路径前缀，路径相对于HTML页面，并不会对生成文件的路径造成影响，主要是对页面里面引入的资源的路径做对应的补全，常见的就是css文件里面引入的图片。
    publicPath: '/assets/',
    //非入口chunk文件的名称
    chunkFilename: '[chunkhash].js'
},
//webpack原生只支持JS和JSON两种文件类型，我们要通过Loaders将它不支持的文件类型转换为有效的文件类型，让webpack能处理它并将它添加到依赖图中。
//module决定了如何处理项目中不同类型的模块。
module: {
    //模块规则（配置loaders、解析器等）
    rules: [
        {
            //指定匹配规则，匹配要使用Loader的文件
            test: /\.jsx$/,
            //在指定目录下匹配文件
            include: [path.resolve(__dirname, 'app')],
            //忽略指定目录下的文件
            exclude: [path.resolve(__dirname, 'app/demo-files')],
            //指定使用哪些loader处理文件，从后往前执行。
            //loader本身是一个函数，接受源文件作为参数，返回转换的结果。
            use: [
                'style-loader', // 直接使用 Loader 的名称，是{ loader: 'style-loader'} 的简写。
                {
                    loader: 'css-loader',
                    options: {    // 给css-loader传一些参数
                    }
                }
            ]
        }
    ],
    //指定不用解析和处理的模块。防止webpack解析那些不用解析但与以上给定正则表达式相匹配的文件。
    noParse: /jquery|lodash/
},
//配置插件，用于bundle文件的优化、资源管理和环境变量注入，作用于整个构建过程。（任何loaders没办法完成的事都可以通过plugins去完成）
plugins: [],
//配置寻找模块的规则
resolve: {},
//输出文件性能检查配置
performance: {},
//配置source-map类型
devtool: '',
//webpack使用的根目录
context: __dirname,
//使用来自 JavaScript 运行环境提供的全局变量
externals: {
    jquery: 'jQuery'
},
//控制台输出日志控制
stats: {},
//DevServer相关的配置
devServer: {}

```

module、chunk和bundle的区别：

module，chunk和bundle其实就是同一份逻辑代码在不同转换场景下的取了三个名字： 我们直接写出来的是module，webpack处理时是chunk，最后生成浏览器可以直接运行的bundle。