webpack基础应用

• 1.安装

  • 

    npm i webpack webpack-cli -D
  • 运行项目的命令：在项目文件夹下：npx +项目名

  • 

• 2.文件系统
  • src :源文件目录
  • dist ：打包好的文件
  • public ：公用的，存放模板的地方

    

• deServer
  • 安装： npm i webpack-dev-server -D
  • 作用：开启一个本地服务器
  • open:true 是否自动打开浏览器
  • host:"localhost" 域名
  • port：8080 端口号
  • hot:true 更新（文件保存，网页自动跟新）
  • package.json:
    • script:{"serve":"webpack serve"}
    • 之后运行项目：npm run serve
• 使用loader
  • 安装：npm i css-loader style-loader -D
  • 作用：css-loader处理.css文件 style-loader把css加载到标签内
  • module:{rule:[{test:/.css$/,use:["style-loader","csss-loader"]}]
• plugin
  • (html模板语法)
    • 安装：npm i html-webpack-plugin -D
    • 作用：生成html模板文件，自动把打包好的js插入到模板语法中
    • 在webpack.config.js导入
      • const HtmlwebpackPlugin = require("html-weboack-plugin")
      • plugins:[new HtmlWebpackPlugin({template:"public/index.html"}) ]
• 图片的插入（运行：build webpack）

• 

• css抽出插件（MiniCssExtractPlugin | webpack 中文文档 | webpack 中文文档 | webpack 中文网）
  • 启动：npm run build
  • 命令：npm install --save-dev mini-css-extract-plugin
  • 配置：

• 

  css优化插件和别名

  

 

• 多入口的打包
• 手动创建vue项目
  • 命令：npm i vue -S ；npm i vue-loader vue-template-compiler vue-style-loader vue-hot-reload-api -D
  • 配置

    

  • 创建文件并执行（npm run serve）

    

    • 注意地址是：http://localhost:8080/main.html