webpack基本使用

1.初始化项目

npm init -y

2.安装webpack

cnpm install webpack webpack-cli -D

3.创建src、dist文件夹
4.创建webpack.config.js文件

const path = require('path');
mode:'development',   //开发环境
//定义入口文件路径以及出口文件路径
const PATH = {
    dev:path.join(__dirname,"./src/main.js"),
    build:path.join(__dirname,"./dist")
}

 //webpack配置
module.exports = {
   //入口文件
      entry:{
         app:PATH.dev
      },
   //出口文件
     output:{
         filename:"[name].js",
         path:PATH.build
     }
}

5.在src中创建入口文件main.js
6.初始打包

npx webpack

7.安装解析js的babel文件

babel是一个编译javascript的平台
babel的安装与配置
1.首先安装这些包
  cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react
   rules:[
        {
            test:/\.(js)$/,
            use:{
                loader:"babel-loader",
                options:{
                    presets:["@babel/env"]
                }
            }
           
        }
    ]

8.安装解析css的loader文件

 cnpm install --save-dev style-loader css-loader  sass-loader node-sass
 //css
  {
        test:/\.(css|scss)$/,
        use:["style-loader","css-loader","sass-loader"]
  }

9.安装html插件会默认在dist文件夹生成一个index.html

 cnpm install -D html-webpack-plugin
 引入：const htmlWebpackPlugin = require("html-webpack-plugin")

  //插件
  plugins:[
      new htmlWebpackPlugin({
          filename:"index.html",
          template:"index.html",
          title:"Vue"
      })
  ]

10.安装处理图片的loader

  cnpm install url-loader file-loader -D
  {
    /* 当图片的大小小于2048的时候用url-loader做解析
       大于2048的时候用file-loader做解析 系统会自动去找file-loader

        url-loader:做解析的时候会解析成base64的形式
        file-loader会解析成原本的形式            
     */
            test:/\.(jpg|png|gif)$/,
            use:{
                loader:"url-loader",
                options:{
                    limit:2048
                }
            }
   }

11.安装处理vue的文件loader

cnpm install -D vue-loader vue-template-compiler
  引入：const VueLoaderPlugin = require('vue-loader/lib/plugin')

   {
        test:/\.vue$/,
        loader:"vue-loader"
   }
  plugins:[
      new VueLoaderPlugin()
  ]

12.安装vue.js

 cnpm install vue -S

13.安装服务器环境

   cnpm install webpack-dev-server -D  帮你自动创建服务器
    devServer:{
       open:true
    }
    在package.json   "scripts": {
                          "dev": "webpack-dev-server"
                     }, 
   
    运行  npm run dev

webpack.config.js

const path = require('path');
  const htmlWebpackPlugin = require("html-webpack-plugin");
  const VueLoaderPlugin = require('vue-loader/lib/plugin');
  //定义入口文件路径以及出口文件路径
  const PATH = {
     dev:path.join(__dirname,"./src/main.js"),
     build:path.join(__dirname,"./dist")
  }


module.exports = {
      mode:'development',//开发环境
      //入口文件
      entry:{
        app:PATH.dev
      },
      //出口文件
      output:{
          filename:"[name].js",
         path:PATH.build
      },
     //配置loader 将浏览器不识别的一些语法转换为浏览器识别的一些语法
    module:{
    //规则
      rules:[
        {
            test:/\.(js)$/,
            use:{
                loader:"babel-loader",
                options:{
                    presets:["@babel/env"]
                }
            }
           
        },
         //css
        {
            test:/\.(css|scss)$/,
            use:["style-loader","css-loader","sass-loader"]
        },
        {
           /* 当图片的大小小于2048的时候用url-loader做解析
             大于2048的时候用file-loader做解析 系统会自动去找file-loader

             url-loader:做解析的时候会解析成base64的形式
            file-loader会解析成原本的形式
           
           */
            
            test:/\.(jpg|png|gif)$/,
            use:{
                loader:"url-loader",
                options:{
                    limit:2048
                }
            }
        },
        {
            test:/\.(woff|svg|eot|ttf|woff2)$/,
            use:["url-loader"]
        },
        {
            test:/\.vue$/,
            loader:"vue-loader"
        }
        
     ]
  },
  //插件
  plugins:[
     new htmlWebpackPlugin({
         filename:"index.html",
         template:"index.html",
         title:"Vue"
     }),
     new VueLoaderPlugin()
  ],
  devServer:{
     open:true
  }
}

webpack基本使用

推荐阅读