webpack笔记-hello world

环境安装

• webpack是一个前端自动化构建工具，基于node.js环境 所以第一步我们需要安装node.js
• 以mac为例首先安装homebrew 然后在安装node.js node.js中包含npm npm中包含npx 所以只需安装node.js
• 我们就可以开始学习webpack了。
• 检测命令 node -v npm -v

hello world!!!

• 前提了解npm/nodejs/es6
• mkdir webpackDemo && cd webpackDemo 首先我们创建一个练习项目
• npm init -y 初始化文件夹 获得npm环境
• 首先要下得依赖就是npm i -D webpack webpack-cli npm i -g webpack
  --- webpack -g依赖下载到全局方便在直接调用命令
  --- -D 等于--save-dev 下载至开发环境
  --- webpack遵循node.js得commonJS语法
• 开始配置

webpackDemo 文件解构
    |__   src //项目资源文件夹（我们写代码得地方）
            |__ index.html/js/css/static 开发文件
                  |__ js文件夹中 我们创建入口文件index.js
    |__   package.josn //开发依赖记录
    |__   node_modules //项目依赖文件夹
    |__   package-lock.json //项目全部依赖记录
    |__  webpack.config.js //webpack配置文件
           |__ 初始化配置 建议阅读webpack官网入门介绍
           const { resolve } = require('path')
           module.exports = {
                  // 入口文件路径设置
                  entyr:'./src/js/index.js', 
                //  输出路径设置
                  output:{
                  filename:'output.js'  //输出文件名称
                  path:resolve(__dirname,'dist')  //输出路径
                  // resolve 从 path中获取  const { resolve } = require('path')
                  },
                  // loader打包规则设置
                  module:{
                    rules:[
                               
                               ]
                  }
                  plugins:[], //  插件设置
                  mode:'development/production' //打包模式设置
                  devServer:{  //  webpack 监听服务设置 自动编译实时刷新
                    contentBase:resolve(__dirname,'dist') //一般监听输出文件
                    compress:Boolean, //  是否开启压缩模式
                    port://  服务端口号
                    open:Boolean //是否在开启服务得同时打开默认浏览器
                  }
          }
 /*
  * resolve: 生成绝对路径  __diranme:当前文件所在路径是Node.js得全局变量   
  * watch服务开启命令 npx-webpack-dev-server 打包得内容会存放在内存中不会输出
  *打包命令 webpack 输出设置中得路径
 */