webpack安装与配置

1.webpack是基于node环境的，因此在安装webpack以前要先安装node.js

 

 2.有了node环境，安装webpack3.6.0（版本随心情）

 

 3.建立src（存放源代码）和dist（用于存放打包以后的）文件夹（写文件main.js和mathUtils.js）

 

 4.使用webapack将main.js打包到dist/bundles.js下（webpack ./src/main.js ./dist/bundle.js）

虽然只使用了main.js,可是与其余关联的也会一块儿打包（main.js为入口）

5.接下来在index.heml，中引入dist/bundle.js(这样打包以后就引入一个就ok,以前的话是有几个js文件引入几个，如今就很方便啦~)，

npm init,会自动生成package.json文件

 

 

 

 6.接下来，运行index.heml,就能够啦~（能够在编辑器，也能够在浏览器）

 

 7.接下来写一个info.js文件，写完以后从新打包一下（webpack ./src/main.js ./dist/bundle.js）

 

 

 

 

 

 8.由于每次打包都须要（webpack ./src/main.js ./dist/bundle.js），因此建立一个webpack.config.js文件来配置出入口等

 

 注意，在配置出口的时候要使用绝对路径！！！不然会报错

先npm init,初始化（生成package.json）若是package.json依赖其余文件时，npm install;

 

 配置好以后，每次打包，只须要输入：webpack就ok辣~

 

 若是不适用webpack（这个词）来打包的话，能够在package中配置

 

ps:在配置文件中配置以后，默认是在本地执行webpack,若是直接在终端（或CMD）执行webpack,就是在全局中（全局和本地的webpack版本可能不一样）

 9.安装本地webpack（npm install webpack@3.6.0 --save-dev），这时package.json中就会显示 webpack版本（开发时依赖版本）

 

 

 10，接下来如何配置css文件(写一个css文件,mian.js依赖一下这个css文件)

webpack主要处理打包时的JS文件，而loader会帮助咱们处理css文件(不一样的文件处理安装不一样的loader)

 

 

 

 

经过npm安装须要使用的loader（npm install --save-dev css-loader 和npm install --save-dev style-loader）

css-loader只负责将css文件进行加载      style-loader负责将样式添加到DOM中

 

 

 接下来在webpack.config.js中配置一下（loader的执行顺序是从右向左的）

 

 

 

配置好c's's以后，npm run build从新打包，运行index.html

 

 

11.webpack配置less(首先有一个less文件)

 

 

 接着在入口中引入less文件

 

 

 

 安装less 须要的loader（npm install --save-dev less-loader less）

 

 

 

 

 

 接下来配置webpack.config.js

 

 

从新打包以后，运行就ok~! 

 

 12.webpack图片文件的处理

 

 安装url loader(npm install --save-dev url-loader)

 

 webpack.config.js中配置一下

 

接下来，就能够看到图片了

 

 

  // 当加载的图片小于limit时，会直接将图片编译成base64字符串形式

              // 当加载的图片大于limit时，会使用file-loader，因此须要安装file-loader

  npm install file-loader --save-dev

 

 从新打包，运行文件

注意。配置一下webpack.config.js文件中的publicPath(编译之后的文件都在dist/文件夹下)

 

对打包后的图片从新命名

 

 

 

13.将ES6转为ES5(使用babel loader)

安装babel loader( npm install --save-dev babel-loader@7 babel-core babel-preset-es2015)

 

 接下来在webpack.config.js中配置

 

从新打包以后，能够看到bundle.js中的const都变为了var

 14webpack配置vue

先将vue安装到node_module文件夹下

npm install vue --save

 

在webpack.config.js中配置，指定导入的vue的版本，包含（compiler）,若是不设置的话默认调用runtime

 15

建立vue时template和el的关系

index.html页面只放一个div,之后修改也不去频繁的改动index.html文件

 

 全部的元素都放在main.js的template中（vue内部会将template中的内容替换到主页的div）

 

 

 

16配置vue

下载vue 的loader（npm install vue-loader vue-template-compiler --save-dev）

 

 webpack.config.js中配置

 

 再去安装plugin插件（vue-loader版本14以上须要安装plugin插件）

也能够在package.json中直接更改vue-loader的版本（更改后从新安装 npm install,根据咱们更改的版本从新安装）

 

 若是想在组件中注册其余组件：能够这样作

子组件

 

 父组件中注册引用

 

 还得导入~

 

 配置省略后缀名

 

 

17 plugin横幅（BannerPlugin是webpack自带的插件）

先引入webpack

 

 在建立

 

 从新打包后，最后就会在bunder.JS文件中添加“最终版权归冯亚婷全部”

18 htmlWebpackPlugin插件（能够自动生成一个index.html文件，能够指定模板来生成；将打包的js文件自动经过script标签插入到body中）

安装插件（npm install html-webpack-plugin --save-dev）

修改webpack.config.js中的配置

 

 注意在使用时，自动生成的script标签路径的修改（由于以前配置了全部url前面都加“dist/”）,如今把配置去掉

 

 设置生成时借鉴模板（模板中只有一个div#app就好了，不用在手动导入js,插件自动导入）

 

 

19，对bundle.js进行压缩的插件uglifyjs(npm install uglifyjs-webpack-plugin@1.1.1 --save-dev)指定版本1.1.1与CL2配合

安装

 

 webpack.config.js中配置

 

 

 

 从新打包以后，就会看到bundle.js已经被压缩了