webpack的基础使用

如果是直接用vue-cli脚手架搭建的vue项目, webpack会先提前配置好

最原始的关于webpack使用的官方教程:

1.首先我们创建一个目录，初始化 npm，然后 在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）

mkdirwebpack-demo&&cdwebpack-demo    ------ 创建一个文件名为webpack-demo的文件夹

npm init -y    ------- 初始化npm

npm install webpack webpack-cli --save-dev      ------ 安装webpack-cli

完成后会生成这三个文件 , 圈住的那些文件会自动生成:

2.搭建如下图所示的文件结构, 是圈出的那些标红的文件,

index.html内容是

index.js内容是:

但是需要先安装依赖:npm install--save lodashnpx webpack

3.执行 npx webpack 会生成main.js文件

4.再添加一个配置文件 webpack.config.js文件 ,直接打包项目就会生成名为bundle.js的文件

内容为:

5.运行npx webpack --config webpack.config.js指令来打包项目

6.考虑到这种打包方式不是很方便, 可以设置快捷方式进行打包:

在package.json中 scripts中添加一项"build": "webpack" ,这时候可以使用npm run build进行打包

注意: 像es6或者之后的语法都是浏览器无法进行解析的 , 需要使用转译器babel转译成es5, 但是webpack自带类似于babel的转译器