webpack配置相关
认识webpack:
- 本质上来讲：webpack是一个现代的javaScript应用的静态模块打包工具。
- 前端模块化的一些方案：AMD, CMD, CommonJs Es6; 目前我们能用的规范是ES6 ,因为只有es6的规范浏览器才能给我们做一些底层的支持，但是我们用了webpack那么上面所提到的规范都能用；因为webpack 在给我们打包的时候会做一些转换；比如我们用到了CommonJs，那么webpack就会将他转化为浏览器认识的一些方案。
- 而在webpack其中一个核心就是让我们可以进行模块化开发，并会帮助我们处理模块间的依赖关系。
- 而且不仅仅是javaScript文件，我们的css, 图片， json文件等等在webpack中都可以被当做模块来使用
- 这就是webpack中模块化的概念。
webpack打包如何理解呐：
- 就是将webpack中的各个资源模块进行打包合并成一个或多个包（Bundle）
-并且在打包过程中，还可以对资源进行处理，比如：压缩图片， 将scss转化成css ，将Es6语法转化成Es5语法，将TypeScript转化成JavaScript等等操作
webpack的安装：
温馨提示：如果要运行webpack 还得依赖node 环境；所以在安装webpack前得先安装node。因为node.js自带了软件包管理工具npm(直接去官网下载安装就行了)
下载地址：https://nodejs.org/zh-cn/
webpack全局安装：
npm install webpack@3.6.0 -g //版本号可写可不写默认安装的最新版
webpack局部安装：
npm install webpack --save-dev //局部安装的webpack只能在当前项目中使用 安装完成后会在本地文件中生成一个node-modules
补充：--save-dev表示是；开发时依赖，项目打包后不需要继续使用的
安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
测试:cnpm -v 如果有出现版本号证明安装成功
webpack项目的创建：
1.首先创建一个根文件夹
2.在根文件夹下面创建两个子文件夹（dist:全称:distribution 发布的意思； src:全称：）
其中src是写源码的地方；dist是我们打包完成后的文件
3.在src的文件夹创建一个main.js的文件作为整个程序的入口
4.在根目录创建一个webpack.config.js的文件；（注意：这个文件名是固定好的不能随意修改）
创建这个文件的目的就是为了配置webpack ；
其中有这几个属性enty:表示webpack 从哪一个文件入口开始打包
ouput:将资源打包到哪去；
module:这个里面主要配置我们打包所需要的各种loader；比如：style-loader ,css-loader, less-loader等等（注意：这些样式的loader是从右到左进 行加载的;顺序一定不能错）
plugin:主要是执行我们打包期间的一些优化和压缩
5.前面的工作做完之后;我们还要初始化项目：终端输入：npm init 当执行完毕后还会在根目录生成一个package.json的文件用来存储当前项目中的一些信息；如果项 目想要单独依赖node环境 则必须初始化；如果package.json还有依赖一些东西的话，还要在终端输入npm install他可以帮助我们在当前项目安装一些东西的
6.继续在终端安装webpack输入npm webpack --save-dev(这是本地安装)；当执行完毕后会在根目录生成一个node_modules的文件夹
如果在本地执行打包还必须安装脚手架输入：npm install webpack-cli --save-dev ；并且在package.json脚本中定义；然后在终端执行打包命令：npm run build
下面展示的是配置里的一下代码：
温馨提示：下面代码中出现的loader和plugin(插件) 都需要在终端安装
const {resolve} = require("path");//导入动态获取路径的node包
const HtmlWebpackPlugin = require('html-webpack-plugin')//打包html插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')//打包vue插件
const webpack = require('webpack')//设置版权插件
module.exports = {
entry:"./src/main.js",
output:{
path:resolve(__dirname,'dist'), //动态获取路径;其中resolve的作用是拼接路径；
filename:"bundle.js", //最终打包成功后的文件名；将其引入到html中去
// publicPath:"dist/" //配置url当前路径（我的没报错就没配置）
},
module:{
rules:[
{test:/\.less$/,
use:['style-loader','css-loader','less-loader']
},
//css-loader只负责将css文件进行加载
//style-loader是负责将样式添加到DOM当中
//使用多个loader时，是从右往左
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
//当加载的图片，小于limit时，会将图片编译成base64字符串形式
//当加载的图片，大于limit时，要使用file-loader进行加载
limit: 3800,
name:'image/[name].[hash:8].[ext]' //配置获取图片名称
},
}
]
},
{//exclude(译：排除)；include(译：包含)
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test:/\.vue$/,
use:['vue-loader']
}
]
},
resolve:{
//alias(译：别名)
// extensions:['.js','.css','.vue'],//表示调用文件时需要省去的后缀
alias:{
'vue$':'vue/dist/vue.esm.js'
}
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html'
}),
new VueLoaderPlugin(),
new webpack.BannerPlugin('最终版权归白头翁')
],
mode: "development",
};
