webpack入门

安装webpack

1. 安装webpacknpm i webpack -g

2. 检查版本号 webpack -v

3. 全局安装webpack-cli npm i webpack-cli -g

webpack核心概念

一、entry&output入口和出口

1. 初始化package.json

2. 新建webpack.config.js 配置文件

3. 配置入口和出口

   // 导入nodejs的path
   const path = require('path');
   
   module.exports = {
       // 入口配置
       entry: './main.js',
       // 出口配置
       output: {
           // 打包后的文件名称
           filename: 'bundle.js',
           // 配置打包后的路径,___dirname当前目录,
           path: path.resolve(___dirname, 'dist')
       }
   }
   

4. 运行打包命令 webpack

5. 遇到问题: 全局命令无法使用,暂时解决办法

   npm i webpack --save-dev
   npm i webpack-cli --save-dev
   

二、mode 模式

1. mode用来设置环境
2. mode:'development' 开发环境
3. mode:'production' 生产环境

三、loader 加载器

1. loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

2. 配置css-loader

   • npm install --save-dev css-loader style-loader 安装

   • 配置

     const path = require('path');
     
     // 导出配置
     module.exports = {
         entry: './main.js',
         output: {
             filename: 'laohu.js',
             path: path.resolve(__dirname, 'dist')
         },
         mode: 'development',
         // 模块(loader)配置
         module: {
             // 规则
             rules: [{
                 // 匹配css文件
                 test: /\.css$/i,
                 // 使用style-loader和cssloader
                 use: ['style-loader', 'css-loader'],
             }],
         },
     }
     

四、plugin 插件

1. loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

2. 配置htmlWebpackPlugin

   • 安装插件 npm install --save-dev html-webpack-plugin

   • 配置文件

     var HtmlWebpackPlugin = require('html-webpack-plugin');
     var path = require('path');
     
     var webpackConfig = {
       entry: 'index.js',
       output: {
         path: path.resolve(__dirname, './dist'),
         filename: 'index_bundle.js'
       },
       plugins: [new HtmlWebpackPlugin()]
     };
     

   • 问题 cannot find module 'webpack/lib/node/NodeTemplatePlugin',解决办法

     npm link webpack --save-dev