webpack打包工具

webpack安装

1. 需要先安装node.js(npm)
   • 地址为https://nodejs.org/en/
   • 安装完成后新建项目并在项目里初始化npm 【npm init】
   • 随后先后执行npm i webpack -g 和 npm i webpack-cli -g 以安装webpack所依赖的两个文件
2. webpack核心概念 【入口，出口，模式，loader，插件】

• 出入口
  • webpack执行流程是你指定一个文件进行打包，如果有引入其他文件则连同一起打包并输出到指定文件夹，指定文件名。
  • 新建文件夹并在文件夹中新建文件webpack.config.js【固定写法】
  • 在文件夹新建两个.js的文件，并在文件中写分别写出不一样的控制台输出 然后在其中一个文件中写入引入另一个文件 例如：

  //引入文件,括号里写地址不需要加后缀
  require('./main2');
  //输出
  console.log('这是第一个文件');
  //下面是第二个文件里的写-----------------------------
  console.log('这是第二个文件');
  const cat = {
      name:'惕隐'
  }
  //导出文件，后面跟你需要导出的对象，变量，常量
  module.exports = cat;
  
  

  • 在webpack.config.js中写 【官方地址：https://www.webpackjs.com/concepts/】

        //导入path模块，path是node自带的【固定】
        const path = require('path');
        //导出配置
        module.exports = {
          //配置入口文件 就是程序从那个文件打开打包我的第一个js文件名字叫main，
         entry: './main.js',
         //配置出口
         output: {
            //配置导出的文件位置  __dirname是当前文件夹内的意思   dist 的是到出到那个文件夹里【如果没有该文件夹则自动创建】
            path: path.resolve(__dirname, 'dist'),
            // 导出的文件的名字叫什么
            filename: 'sst.js'
          },
    
    };
    
    
    
    

  • 最后在当前文件中打开终端执行webpack，然后会多出一个dist【取决于你配置出口中所写的文件夹名字】的文件夹打开他会有一个sst.js【取决配置导出文件名字】的文件

  • 打开在已经打包的文件上启动终端并执行node 【文件名字】 就可以顺利输出

• 模式【详细请看开发文档：https://www.webpackjs.com/concepts/#模式】
  1. mode: 'development' 开发环境
  2. mode: 'production' 生产环境
• loader加载器【解释器】
  • webpack打包工具 只能识别.js的文件，并不能打包.css的文件因此想要连同css一起打包的话，就需要用到loader加载器向webpack去说明该如何处理css文件。
  • 我们想要打包css想要用到两个额外的东西分别是css-loader 和 style-loader 我们想要用npm 进行安装 在文件夹内打开终端执行 npm i --save-dev css-loader style-loader 等待安装完成
  • 安装完成后新建个style.css文件并 写入 body{ background: red;} 随后在第一个js文件中引入他映入css文件必须写后缀 require('./style.css');
  • 完成后打开webpack.config.js文件【你可以在这里看为什么这样做，他是另一方的东西，并不是webpack自己带的，所以上面要求用npm下载css-loader 和 style-loader ，https://www.npmjs.com/package/css-loader】

            //导入path模块，path是node自带的【固定】
            const path = require('path');
            //导出配置
            module.exports = {
              //配置入口文件 就是程序从那个文件打开打包我的第一个js文件名字叫main，
             entry: './main.js',
             //配置出口
             output: {
                //配置导出的文件位置  __dirname是当前文件夹内的意思   dist 的是到出到那个文件夹里【如果没有该文件夹则自动创建】
                path: path.resolve(__dirname, 'dist'),
                // 导出的文件的名字叫什么
                filename: 'sst.js'
              },
          //配置模式  development为不压缩代码 production为压缩代码,默认为production
                mode: 'production',
          //loader
                module: {
                    //规则【是个数组】
                      rules: [
                                //规则项
                                  {
                                      //对什么东西生效，这里写的是.css以为着他对所有以.css结尾的文件生效
                                      test: /\.css$/,
                                      //让webpack先使用以下两种东西去解析css文件【注意两种东西是第三方并不是webpack自带的】
                                      use: ['style-loader', 'css-loader'],
                                  },
                              ],
                          },
                      };
  

• 然后在控制台运行webpack就没有问题了，如果要看效果请新建一个html文件并引入压缩过的js文件就可以看到页面为红色。
• plugins 插件 【https://www.webpackjs.com/concepts/】
  • 插件loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
    想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
  • 在文件夹内新建一个index.html的文件并打上

      
    
    
        
        
        
        
    
    
        span标签
    
    
    

  • 使用npm 安装 npm i html-webpack-plugin --save-dev
  • 安装完成后打开webpack.config.js 在文件中新加

  //导入path模块，path是node自带的。
  const path = require('path');
  
  // 导入 HtmlWebpackPlugin 插件【新加的】
  const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过npm安装
  
  //导出配置
  module.exports = {
      //配置入口文件
    entry: './main.js',
    //配置出口
    output: {
        //配置导出的文件位置 当前文件夹内  的文件名字
        path: path.resolve(__dirname, 'dist'),
        // js文件名字
        filename: 'sst.js'
      },
      //配置模式  development为不压缩代码 production为压缩代码,默认为production
      mode: 'development',
      //loader
      module: {
            //规则【是个数组】
        rules: [
         //规则项
          {
           //对什么东西生效，这里写的是.css以为着他对所有以.css结尾的文件生效
            test: /\.css$/,
              //让webpack先使用以下两种东西去解析css文件【注意两种东西是第三方并不是webpack自带的】
            use: ['style-loader', 'css-loader'],
          },
        ],
      },
  
      //插件【新加的】
      plugins: [
        //设置HtmlWebpackPlugin插件   template为模板 后面跟你的模板地址
        new HtmlWebpackPlugin({template: './index.html'})
      ]
  };
  

  • 在当前文件夹运行终端 执行 npm link webpack --save-dev 如果不执行这条将会报错，执行完成后继续执行 webpack 后你就在你指定目录下看到一个 .html和一个,js的文件 打开文件会是红色背景和一段文字为 span标签