webpack安装

打开webstorm编辑器，建一个webpack-study文件夹，在这个文件夹里建以dist,src，命名的两个文件夹，再在src文件夹里面建css,js,images三个文件夹，方便后面使用，这是一般的建文件套路。

 

1.打开命令提示符，输入命令 npm i webpack -g             //全局安装webpack

2.输入命令 npm install  或者简写为 npm i         //下载 node_modules 依赖

3.输入命令 npm info webpack        //初始化、

4.输入命令 npm install -g cnpm --registry=https://registry.npm.taobao.org         下载淘宝npm

5.输入命令  npm i jquery -S     //下载jQuery

6..在webpack-study文件下，创建index.js  输入下图的相关命令（各行变色的代码 为例）

7..输入命令 webpack ./src/index.js -o ./dist/main.js         //配置入口文件路径 输出文件路径

8..输入命令 webpack ./src/index.js -o ./dist/main.js   --mode development     //设置打包模式为开发模式

9..在项目根目录中创建webpack.config.js  按照下图输入配置相关命令

10.实现webpack实时打包，输入命令 npm i webpack -D

11.输入命令  `npm i webpack-dev-server --save-dev`   //安装到开发依赖

12.输入命令 `webpack-dev-server`   //打包

13.打开package.json   输入命令  webpack-dev-server  配置打开及端口号，也可以在webpack.config.js文件中输入下图二，配置相关参数

14.输入命令   npm run dev     //就可以进行实时打包    退出就按ctrl+C  选yes

15.输入命令  npm i html-webpack-plugin --save-dev      //使用 html-webpack-plugin插件配置启动页面.安装到开发依赖

16.css文件打包  输入命令    npm i style-loader css-loader --save-dev

17.less文件打包   输入命令   npm i less-loader less -D

18.sass文件打包  输入命令  npm i sass-loader node-sass --save-dev

19.css中的路径问题   输入命令   npm i url-loader file-loader --save-dev

注意：16-19步都要在webpack.config.js中配置下图相应的命名

20.使用babel处理高级js语法 ，输入命令  npm i babel-core babel-loader babel-plugin-transform-runtime --save-dev    //安装loader包

21.输入命令 npm i babel-preset-env babel-preset-stage-0 --save-dev   //安装babel转换语法

22.在项目根目录中添加.babelrc文件，配置文件如下图