VUE前端_webpack入门(一)

先说点废话,使用vue.js开发大型应用需要使用webpack打包工具,Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。
1、模块化开发
程序员在开发时可以分模块创建不同的js、 css等小文件方便开发，最后使用webpack将这些小文件打包成一个文
件，减少了http的请求次数。
webpack可以实现按需打包，为了避免出现打包文件过大可以打包成多个文件。
2、 编译typescript、ES6等高级js语法
随着前端技术的强大，开发中可以使用javascript的很多高级版本，比如：typescript、ES6等，方便开发，
webpack可以将打包文件转换成浏览器可识别的js语法。
3、CSS预编译
webpack允许在开发中使用Sass 和 Less等原生CSS的扩展技术，通过sass-loader、less-loader将Sass 和 Less的
语法编译成浏览器可识别的css语法。

1.基础环境

使用VUE的环境少不了node.js和npm(国内建议cnpm)这两个简简单单自己动手就可以配置了,网上有不少教程,这里主要讲下webpack安装配置过程中自己遇到的问题

node ‐v
npm -v
cnpm -v

准备好这些开始安装webpack,强烈建议本地项目安装(因为全局安装我遇到很多配置问题,烦的很)
执行目录:项目根目录

npm init -y
cnpm install --save-dev webpack
cnpm install --save-dev webpack-cli

根目录下创建index.html
修改package.json :
新增 "private": true,确保安装包是私有的，并移除 main 入口"main": "index.js",这可以防止意外发布代码。

执行 npx webpack 会将脚本 src/index.js 作为 入口起点，也会生成 dist/main.js 作为 输出。(后将有关index.js的引用改为main.js)

如果你的入口文件路径及文件名不是src/index.js 可以执行 npx webpack --entry ./src/main.js
灵活修改需要在webpack.config.js修改,该文件可以自己创建,或者执行命令npx webpack init不过该命令过程繁琐,建议自己创建

不用在意命令webpack -v或webpack是否成功,我也是直接webpack报错弄了挺久,发现全局安装不是人干的事