手动配置webpack 版本3.8.1

2017-07-15

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源

中文文档 https://webpack.docschina.org/
概念什么是webpack和grunt和glup有什么不同
webpack是一个模块打包器，可以递归打包项目中所有模块，最终生成几个打包后的模块，他和其他工具最大的不同是在于它支持code-splitting、模块化（AMD、CMD、ESM、Commonjs、）,全局分析
概念什么是bundle 什么是chunk 什么是module
bundle是webpack的打包文件 chunk指webpack在进行模块依赖分析的时候代码分割出来的代码块 module指开发中单个模块
概念什么是Loader 什么是plugin
Loader是告诉webpack如何处理转化某一类型文件并且引入到打包出的文件中
plugin是用来自定义webpack打包过程方式，一个是插件含有apply方法的一个对象，通过这个过程可以参与到整个webpack打包的各个流程(生命周期)
开发问题 webpack-dev-server和http服务器如nginx有什么区别
webpack-dev-server使用内存来存储webpack开发环境下的打包文件并且可以使用模块热更新，比传统的http服务对开发更加简单高效
开发问题什么是模块热更新
模块热更新是webpack的一个功能，可以使修改过的代码不用刷新浏览器就可以更新，是高级版的自动刷新浏览器
优化问题什么是长缓存
浏览器在用户访问页面的时候，为了加快加载进度，会对用户的静态资源进行缓存，但是代码每一次升级或者更新都需要更新浏览器下的代码，最方便和简单的更新方式就是引入新的文件名称，在webpack中可以在**output给输出的文件指定chunkhash，并且分离经常跟新的代码和框架代码，通过NameModulesPlugin或者HashedModuleIdsPlugin**使再次打包的文件名不变
什么是Tree-shaking? css可以Tree-shaking吗
Tree-shaking是指打包中去除那些引入了，但是在代码中没有被用到的那些死代码，在webpack中Tree-shaking是通过uglifyJSPlugin来Tree-shaking Js。css需要使用Purify-CSS
文件结构
创建一个项目文件夹
在当前项目文件夹创建个src文件夹
src文件夹包括 index.html和main.js
下载webpack
在安装 Webpack 前，你本地环境需要支持 node.js。
全局安装
1
npm install webpack -g
局部安装
1
npm install webpack --save-dev
安装webpack或者less最好不要安装全局的，否则可能导致webpack的版本差异
生成package.json文件
定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）
在根目录生成package.json文件和添加配置文件.babelrc文件
1
npm init -y

在package.json中配置一个脚本命令

1
2
3

"scripts": {
    "build": "webpack",
 }

webpack命令会去当前的node_modules下找bin对应的webpack的js并其执行，执行时就是bin/webpack.js
webpack.js需要当前项目根目录下必须有 webpack.config.js 的文件
我们通过npm run build执行的目录是当前文件夹的目录所以会去当前目录下查找

webpack需要安装的依赖插件

es6、es7语法解析

babel 转换ES6->ES5 的翻译官

安装babel

1 2	npm instal babel-core --save-dev npm instal babel-loader --save-dev

babel-preset-es2015 解析es6语法

1	npm install babel-preset-es2015 --save--dev

babel-preset-stage-0 解析es7语法
stage-0是最大范围 babel-preset-stage-4是es6
1
npm install babel-preset-stage-0 --save-dev
增加文件.babelrc配置-让翻译官拥有解析es6、es7的语法功能
1
2
3
{
"presets": ["es2015","stage-0"]
}
解析样式
css-loader将css解析成模块，将解析的内容插入style标签内（style-loader）
1
npm install css-loader style-loader --save-dev
css的预处理语言 less sass stylus
less-loader less
sass-loader

stylus-loader

1	npm install less less-loader --save-dev

解析图片

file-loader url-loader(是依赖于file-loader 能用的是url-loader 会自动引用file-loader)
1
npm install file-loader url-loader --save-dev
需要解析成html插件
插件的作用是以我们src下自己的html为模板，将打包后的结果自动引入到html中产生到dist目录下
1
npm install html-webpack-plugin --save-dev
启动服务webpack-dev-server
这里面内置了服务，可以帮我们启动一个端口号，当代码更新时可以自动打包（在内存中打包）,可以时刻监控代码，代码有变化就重新执行
然后在package.json里的script配置命令 “dev”: “webpack-dev-server”
1
npm install webpack-dev-server --save-dev
vue工程需要vue-loader、vue-template-compiler
vue-loader依赖编译模板 vue-template-compiler
vue-loader 解析.vue文件的 vue会自动的调用vue-template-compiler

vue-template-compiler用来解析vue模板的

1 2	npm install vue-loader --save-dev npm install vue-template-compiler --save-dev

重点配置webpack.config.js

//webpack 必须采用commonjs写法
//专门处理路径用的 以当前路径解析出一个相对路径
var path = require('path')
//引入解析成html插件
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    //打包的入口文件 webpack会自动查找相关的依赖进行打包
    entry:'./src/main.js',
    //如果要配置多个入口文件
    //entry:{
    //    main:'./src/main.js',
    //    main1:'./src/main1.js',
    //},
    output: {
        //打包后的路径必须是绝对路径 var path会解析出绝对路径
        path:path.resolve('./dist'), //必须是一个绝对路径
        filename: 'build.js'//打包后的名字
        //filename: '[name].js'//如果打包多个入口文件
    },
    //模块的解析规则
    //js 匹配所有的js 用babel-loader转义并排除node_modules
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            // 转化base64只在8192(8k)字节以下转化。其他情况下输出图片
            {
                test:/\.(jpg|png|gif|jpeg)/
                ,use:'url-loader?limit=8192'
            },
            {
                test:/\.(eot|svg|woff|woff2|wtf)$/,
                use:'url-loader'
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }

        ]
    } ,
    devtool:'source-map',//报错映射源码可以直接找到报错源码
    plugins:[
        //自动生成HTML 自动插入到dist目录中的index
        new HtmlWebpackPlugin({
            template:'./src/index.html', // 使用的模板
            // filename:'index.html' // 产出的文件名字默认是index
        })
    ]
}

配置Vue工程

因为html-webpack-plugin会根据src的index文件为模板,npm run build后会以此模板直接打包到dist文件下
所以模板的样式只需添加id=’app’即可

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

然后再如后文件main.js引入vue文件然后再挂载vue
import Vue from ‘vue’这样引用Vue引用的并不是vue.js而是引用的是vue的runtime，vue = compiler + runtime(compiler可以编译模板) 只支持render，所以正常写的会报错

compiler只有6K

import Vue from 'vue'
new Vue({
    el:'#app',
    //只支持render写法会报错
    template:'<div>我是模块</div>'
})

render函数实现的方式是将虚拟dom渲染成真是dom

render:function(creatElement){
   return creatElement('h1',[ //h1中有两个元素 hello和span
       'hello',
       creatElement('span','一则头条')
   ])
}

所以我们要创建一个App.vue让reder函数实现dom渲染

<template>
    <div>

    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        data(){
            return{

            }
        }
    };
</script>
<style>

</style>

接下来就是配置入口文件了 main.js

import Vue from 'vue'
import App from './App.vue';//文件模块需要加./
console.log(App)
import router from './router/index'

new Vue({
    el:'#app',
    router,
    //通过render函数将虚拟dom渲染成真实dom
    render:h=>h(App)
})

router路由

import Vue from 'vue'
import Home from '../components/Home.vue'
import List from '../components/List.vue'

import VueRouter from 'vue-router';
Vue.use(VueRouter);//和以前不一样的地方引入vue必须使用use

export default  new VueRouter({
    routes:[
        {path:'/Home',component:Home},
        {path:'/List',component:List}
    ]
})

目录结构

├── dist                            // 打包后的文件
├── node_modules                    // npm下载的文件
├── src                             // 项目文件
│   ├── components                 // 组件
│   │   ├── home
│   │   ├── list
│   ├── router                     // 路由配置
│   │   ├── index.js
├── App.vue                         // render函数渲染dom入口
├── index.html                      // 页面模板
├── main.js                         // 程序入口文件，加载各种公共组件

常用模块

html-webpack-plugin //html单独打包成文件
extract-text-webpack-plugin //样式打包成单独文件
CommonsChunkOlugin//提出通用模块
webpack-dev-server//为web项目提供服务 更改代码自动更新，路径转发

概念 什么是webpack和grunt和glup有什么不同

概念 什么是bundle 什么是chunk 什么是module

概念 什么是Loader 什么是plugin

开发问题 webpack-dev-server和http服务器如nginx有什么区别

开发问题 什么是模块热更新

优化问题 什么是长缓存

什么是Tree-shaking? css可以Tree-shaking吗

文件结构

下载webpack

生成package.json文件

webpack.js需要当前项目根目录下必须有 webpack.config.js 的文件

webpack需要安装的依赖插件

es6、es7语法解析

增加文件.babelrc配置-让翻译官拥有解析es6、es7的语法功能

解析样式

css的预处理语言 less sass stylus

解析图片

需要解析成html插件

启动服务webpack-dev-server

vue工程需要vue-loader、vue-template-compiler

重点 配置webpack.config.js

配置Vue工程

router路由

目录结构

常用模块

概念什么是webpack和grunt和glup有什么不同

概念什么是bundle 什么是chunk 什么是module

概念什么是Loader 什么是plugin

开发问题什么是模块热更新

优化问题什么是长缓存

重点配置webpack.config.js