Vue10--webpack

原创已于 2024-11-01 18:13:54 修改 · 173 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2020-03-27 13:03:48 首次发布

前端专栏收录该内容

29 篇文章

订阅专栏

了解Webpack作为JavaScript应用的静态模块打包工具的角色，掌握CommonJS、AMD、CMD和ES6 Modules规范的转换，熟悉Webpack、Node和NPM的关系，学会基本的全局和局部安装，配置webpack.config.js，以及使用npm run命令自动化构建。

webpack:

是一个现在的JavaScript应用的静态模块-打包工具
模块的规范化，常见的规范化有CommonJS、AMD、CMD和ES6的Modules
浏览器只支持ES6的Modules模规范化，webpack则可以CommonJS、AMD、CMD打包成浏览器支持的模块规范化

webpack 、node、 npm 关系

webpack正常运行必须依赖node运行环境；
node为了可以正常运行很多代码，其中必须包含各种依赖包；
npm工具(node packages manager) 来管理各种包（在安装node会自动安装npm）
webpack 全局安装
cmd下

npm install webpack@版本号 -g(全局)

查看版本：

webpack -v

## 目录文件
dist:打包后的文件
src:开发时的文件
webpack 打包：
将main.js 打包到dist下成为bundle.js文件

webpack ./src/main.js ./dist/bundle.js

改进上面的命令行，直接webpack打包即可
固定文件名
webpack.config.js：

module.exports={
    entry:'./src/main.js',   // 入口
    output:{
        path:'./dist',    // 出口路径
        filename:'bundle.js',  // 文件名
    }
}

报错 The provided value “./dist” is not an absolute path!
导入node中的path模块获取项目的绝对路径
1、const path=require(‘path’)–需要用到node东西
npm init 来初始化
生成package.json文件
当pacgage中存在依赖 -----npm install 加载
path.resolve(__dirname,‘dist’) ：获取项目绝对路径并且拼接

const path=require('path')
module.exports={
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js',
    }
}

npm run 命令参数

package.json文件：

scrpits:执行的脚本配置—首先会去本都node-modules/bin下面去查找，当本地没有是才去全局环境下查找
配置build:‘webpack’
执行 npm run build------去执行webpack，其会首先从本地项目去找webpack,当本地项目（局部）没有时再去找全局的webpack,一般都会先安装局部webpck,因为你的同事webpack版本有可能和你不一致，通过安装局部webpack来保持一致
安装剧本webpack
npm install webpack@版本 --save-dev(开发时依赖)

{
  "name": "test1-1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },
  "author": "",
  "license": "ISC"
}