webpack的基本使用

webpack

• webpack是一个前端资源打包工具，他将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源

webpack的基本使用

• 先初始化项目

  npm init -y

-需要安装的webpack包以及第三方加载器的包

 npm install webpack -D
 npm install webpack-cli -D
 npm install webpack-dev-server -D
        //为了避免每次修改代码之后都执行webpack命令，则使用了webpack-dev-server  
        //小型的express服务器 为静态文件提供服务，自动刷新和热替换
        //webpack-dev-server会帮我们自动生成一个内存中的bundle.js
 npm install html-webpack-plugin -D
          //webpack的插件，使用该插件可以生成自己指定的html文件，和配置使用自己设置的加载器
         //使用该插件后，不需要我们手动的处理bundle.js的引用路径了，该插件帮我们自动创建了一个合适的script
         //该插件自动在内存中根据指定的页面生成一个内存的页面，同时也会把打包好的bundle.js追加到页面中

 npm install style-loader css-loader node-sass sass-loader url-loader file-loader -D 
        //处理不同后缀名的样式文件和图片的第三方加载器
 npm install babel-core babel-loader babel-plugin-tranform-runtime babel-preset-env babel-preset-stage-0 -D  
        //babel是将高级的js转化为浏览器能处理的低级的js

• 根目录下新建webpack.config.js文件
• 配置该文件

    const path = require('path')
    const htmlWebpackPlugin = require('html-webpack-plugin')
    module.exports={
        entry:path.join(__dirname,'./src/main.js'),//入口，表示webpack打包那个文件
        output:{
            path:path.join(__dirname,'/dist'),//指定打包好的文件，输出到那个目录中
            filename:'bundle.js'//指定输出的文件的名称
        },
        plugins:[//配置html-webpack-plugin插件
            new htmlWebpackPlugin({
                template:path.join(__dirname,'/src/index.html'),//指定模板页面
                filename:'index.html'//根据指定的页面生成一个内存的页面的名称
                })
        ],
        module:{//配置第三方解析加载器
            rules:[
             {test:/\.css$/,use:['style-loader','css-loader']},
             {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
             {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
             {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=39290&name=[hash:8]-[name].[ext]'},
             {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},
             {test:/\.jsx?$/,use:'babel-loader',exclude:/node_modules/},
            ]
        }
    }

• 根目录下新建.babelrc文件
• 使用babel将高级js语法转化为低级js语法

   {
       "presets":["env","stage-0"],
       "plugins":["tranform-runtime"]
   }

-在package.json文件中配置webpack-dev-server启动的默认选项

  //在scripts标签下新添"dev"标签，具体内容如下：
  "dev":"webpack-dev-server  --open --port 3000 --hot"
  //webpack-dev-server 使用npm run dev即可运行该服务
  //--open 自动打开localhost页面
  //--port 3000 修改端口号
  //--hot 不用每次修改数据创建一个新的bundle.js文件

-启动服务

    npm run dev

由于安装版本的问题使得项目运行不起来，以下是我安装版本的示例，仅供参考

    "dependencies": {
    "bootstrap": "^4.4.1",
    "jquery": "^3.5.0"
  },
  "devDependencies": {
    "@babel/runtime": "^7.9.2",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.30.1",
    "less": "^2.3.1",
    "less-loader": "^4.0.5",
    "popper.js": "^1.16.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"

dependencies和devDependencies的区别

• –save （dependencies）向生产环境添加依赖：项目部署上线后的服务器环境
• –save-dev （devDependencies） 向开发环境添加依赖 ：平时开发使用的环境