webpack是一个模块打包工具,默认只能打包js文件
借助于loader插件,webpack可以将css、img等静态资源也当做模块一起打包
webpack是基于nodejs运行的,所以在打包前必须保证本地拥有nodejs运行环境
1、初始化:
npm init -y
2、本地安装:
npm install webpack --save-dev
3、babel-loader:
npm install babel-loader babel-core -D
4、安装插件:
npm install babel-preset-es2015 babel-plugin-transform-runtime -D
5、配置css模块:
npm install css-loader style-loader autoprefixer-loader -D
6、配置less模块:
npm install less less-loader -D
下载安装无误后,package.json里会自动生成相应的版本号
7、创建webpack.config.js
8、创建文件夹src,在文件夹内创建文件main.js
9、配置环境变量
10、在根目录下输入webpack -v
11、安装webpack-cli
12、每次更改,都要webpack-cli后,才能在浏览器中显示