Webpack飞行手册

let People = { name: "Simon" } ;
module.exports = People;

而我们又该怎样实现 在前端中加载模块呢？

下面是两个很常见的例子：

在 Less 中

@import "header";
@import "layout";
@import "footer";

在 Javascript

// CommonJS
const $ = require("jQuery");

//es6
let People = { name: "Simon" } ;
module.exports = People;

import "./layer.less";
import tpl from "./layer.ejs";

modules.export={
    entry:{
        /* 入口文件 */
    },
    output:{
        /* 出口文件 */
    },
    module:{
        /* Loader */
        rules:[{},{},{}]
    },
    plugins:[ 
        /* 插件 */ 
    ],
    devtool: ...
    devServer: {...}
    resolve:{...}
}

entry: "app.js";

entry: ["app.js","main.js"];

entry:{
        app: "./src/js/app.js",
        main: "./src/js/main.js"
    }

module:{
 	rules:[
 	   	{
  			test:/\.xxx$/,//以xxx结尾的文件
  			loader: "xxx-loader",
 	 		exclude: {排除的路径},
 	 		include: {包含的路径},
 	 		options: {Loader配置}
 	 	}
 	]
}

loaders:[
 	{loader:"style-loader"},
 	{ loader: "css-loader?modules", options: { importLoaders: 1 } },
 	{loader: "less-loader"}
]

loader: "style-loader!css-loader?importLoaders=1!less-loader"

主要用于将 es6 转换成 es2015

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

const htmlWebpackPlugin = require("html-webpack-plugin");
......
plugins: [ new htmlWebpackPlugin({/* options */}) ]

new htmlWebpackPlugin({
 	//打包后的文件名
 	filename: "index.html",
 	
 	//模板
 	template: "index.html",
 
 	//为true自动生成script标签添加到html中
 	//或者写 body/head 标签名
 	inject: false,//js的注入标签
 
 	//通过<%= htmlWebpackPlugin.options.title  %>引用
 	title: "参数title",
 
 	//通过<%= htmlWebpackPlugin.options.date %> 引用
 	date: new Date()
 
 	//网站的图标
 	favicon: 'path/to/yourfile.ico'
 
 	//生成此次打包的hash
 	//如果文件名中有哈希，便代表有 合理的缓冲
 	hash: true,
 
  	//排除的块
  	excludeChunks: [''],
  
 	//选中的块 与入口文件相关
 	chunks: ['app','people'],
 
 	//压缩
 	minify:{ 
 		removeComments: true,collapseWhitespace: true,
 		minifyJS: true,	minifyCSS: true,minifyURLs: true,
 	}

        
}),

常用命令

• webpack

  最基本的启动webpack命令

• webpack -w

  监控代码变化，实时进行打包更新

• webpack -p

  对打包后的文件进行压缩，利用线上发布

• webpack -d

  提供SourceMaps，方便调试代码

• webpack --colors

  输出结果带彩色，可以更详细的查看信息

• webpack --profile

  输出性能数据，可以看到每一步的耗时

devtool

不知道你现在时候有没有一个想法？ webpack 打包后的文件就一定正确无误吗？ 如果发生错误的话，该怎么办呢？

devtool 属性 便提供了生成 sourcemap 的功能，具体有下面这些选项。

1. source-map

   此选项具有最完备的source map，但会减慢打包的速度；

2. cheap-module-source-map

   生成一个不带列映射的map

3. eval-source-map

   使用eval打包源文件模块，生成一个完整的source map。

4. cheap-module-eval-source-map

   这是最快生成source map的方法，生成后的Source Map 会和打包后的 JavaScript 文件同行显示，但没有列映射，所以慎用

devServer

1. contentBase: "./dist",

   本地服务器所加载的页面所在的目录

2. historyApiFallback: true,

   再找不到文件的时候默认指向index.html

3. inline: true,

   当源文件改变时会自动刷新页面

4. hot: true,

   热加载开启

5. port:8080

   设置默认监听端口

resolve

1. extensions: [".js", ".html", ".css", ".txt","less","ejs","json"],

   自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名

2. alias: { Temp: path.resolve(__dirname, "src/templates/") }

   模块别名定义，直接 require('AppStore') 即可,方便后续直接引用别名

其他功能

path

常用于字符串拼接路径。

const path = require("path");

有两个 API

1. path.resolve()

   将相对路径转换成绝对路径

const aPath = path.resolve("__dirname","js","main.js");
// aPath = 当前目录下的 js 文件夹的 main.js 文件的路径

const rPath = path.join("source","js","main.js");
// aPath = //source/js/main.js

devServer: {
 	hot: true,//热加载开启
 	inline: true,//文件改变时会自动刷新页面
}

const webpack = require("webpack");
//Other property
plugins: [
 	new webpack.HotModuleReplacementPlugin()
]