webpack打包js全局本地安装

1,webpack安装命令版本匹配号 安装不匹配的版本会报错的 下图匹配的版本

全局安装：

npm install --global webpack@版本号

        

          
        
        
        

          

          AI 代码解读
        
      
      

本地安装：

npm init -y //生成配置文件package.json
npm install --save-dev webpack@4.35.3
如果你使用 webpack 4+ 版本，你还需要安装 CLI。如下命令：
npm install --save-dev webpack-cli@3.3.6

        

          
        
        
        

          

          AI 代码解读
        
      
      

全局安装和本地安装的区别 ：

全局安装的话 项目代码使用全局的we'b'pack 那么换一个电脑没有全局安装webpack那么这个项目就跑不起来 如果安装了 但是版本号不一致也会出错
本地安装的话 直接安装在项目里面 你把项目用别人的电脑都可以正常使用

开始打包js

目录结构

文件内容

在index.html文件运行代码 浏览器识别不了require方法因为浏览器无法识别 JS 模块化文件(导出导入的都是模块化)

下面开始打包解决

正文

1 .配置打包命令npm run build

**
**打包命令为终端输入： webpack
但是我们的vue项目都是npm run build 我们能不能使用此命令？ ？

答：需要做配置：打开package.json文件 配置scripts：{}

{
  "name": "demo03",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node ./src/main.js",//使用node运行main.js的输出结果
    "build": "webpack", //npm run build 就是执行的webpack
    "show": "webpack -v"//查看webpack的版本号
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.0.0",
    "file-loader": "^4.0.0",
    "html-webpack-plugin": "^4.5.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.35.2",
    "webpack-cli": "^3.3.6"
  }
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

2.配置打包文件的出入口

在项目根目录新建webpack.config.js文件

const path =require('path')
module.exports={
    mode:'development',//production development开发环境不压缩dist 
    entry:'./src/main.js', //我们在main.js(主入口)引入了其他文件的js
    output:{
        path:path.join(__dirname,'./dist/'),  //输出的文件目录为dist
        filename:'bundle.js'  //打包后的文件名为bundle.js
    }
}

        

          
        
        
        

          

          AI 代码解读
        
      
      

输入打包命令：

npm  run build 

        

          
        
        
        

          

          AI 代码解读
        
      
      

打包后会发现出现一个dist文件夹

此时html引入打包后的js文件

此时运行html代码正常执行

下一节安装插件打包图片 css 配置html