webpack-配置

什么是webpack？

从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。

前端模块化

常见模块化方案：AMD、CMD、CommonJS、ES6 但！！！浏览器只支持ES6，那我们想用其他的方案怎么办呢？

解决方案：webpack

当然，这只是webpack的一个功能，webpack还具有其他很多功能，比如es6转es5，less转css等

webpack安装

webpack首先需要node.js环境

npm init 首先初始化node.js 环境

全局安装

npm install webpack@3.6.0 -g  这里以3.6.0为例，vue cli2依赖该版本

webpack3.6.0安装失败解决方法

解决办法就是，使用淘宝npm镜像。

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install webpack@3.6.0 -g

这样就可以成功的安装webpack3.6.0了

webpack loader打包失败

css-loader,style-loader版本过高，推荐版本

css-loader --3.3.0
style-loader --1.1.0

基本的项目结构

• dist文件夹：用于存放打包之后的文件
• src文件夹：用于存放我们写的源文件
• index.html：浏览器入口展示文件
• package.json: 未展示，与index.html同一目录

如何用webpack打包js文件呢？

webpack src/main.js  dist/bundle.js
将main.js 打包到 bundle.js里，webpack会帮我们自动处理包之间的依赖关系

入口和出口

每次都输这么一大堆很麻烦，于是我们可以采用webpack.config.js文件来进行设置默认配置
在使用path包之前，需要先初始化node环境，这是path可以帮我们动态获取路径，然后组成绝对路径

局部安装webpack

为什么要局部安装webpack呢？

一个项目往往依赖特定的webpack版本，全局版本很可能与这个项目的webpack版本不一致，容易出现打包问题。
npm install webpack --save-dev

启动局部webpack
node_modules/.bin/webpack

上述方式很麻烦，那有没有简单的办法之间运行局部的webpack呢？

package.json 启动

在init之后的package.json中添加如下脚本，这样在运行 npm run build 的时候会优先运行局部的webpack

什么是loader？

• loader是webpack中一个非常核心的概念。
• 我们需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。
• 这是webpack原生不支持的东西，所有我们需要loader来帮助我们进行打包。
• loader中文网的参考 https://www.webpackjs.com/loaders/

以下是常见css文件加载的时候loader需要有的配置，详细看注释内容。
css文件打包时候需要的loader

css-loader \ style-loader

less文件打包适配版本

"less": "^3.9.0",
 "less-loader": "^4.1.0",

webpack打包图片

"url-loader": "^1.1.2",
"file-loader": "^3.0.1",

在option中添加上name属性，可以给打包的img进行命名

name: 'img/[name].[hash:8].[ext]'
img文件夹下，[name]图片原来的名字，[hash:8] 八位哈希值，[ext]拓展

相关配置文件

ES6转换ES5

只针对es6转化到es5的相关配置文件

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015