webpack

* 模块打包器：

* 分析项目结构找到javascript模块或其他浏览器不能直接运行的扩展语言（scss，typescripts等），打包为合适的格式以供浏览器使用

* webpack和grunt、gulp相比有什么特性？！

* grunt、gulp：前端流程化工具

* webpack：一种模式化的解决工具

* grunt、gulp：在一个配置文件中，指明对某种类型的文件进行编译、组合、压缩等处理，这个工具可以自动为你完成这些任务

* webpack：把项目当初一个整体，通过给定的入口文件（如index.js），webpack会从这个文件开始找到项目里的所有依赖文件，使用loaders处理它们，最终打包成浏览器可以处理的js文件

* 一个实例：（做same防站的时候配置的webpack.config.js）

var path = require("path");

var webpack = require("webpack");

var HtmlwebpackPlugin = require("html-webpack-plugin");

// 一些常用路由

/***

* path.resolve([from...], to)

* form: 原路径，

* to:   将被解析到绝对路径的字符串

*/

const ROOT_PATH = path.resolve(__dirname);

const APP_PATH = path.resolve(ROOT_PATH, "app");

const BUILD_PATH = path.resolve(ROOT_PATH, "build");

module.exports = {

entry: path.resolve(APP_PATH, "index.jsx"),

output: {

path: BUILD_PATH,

filename: "bundle.js",

},

// 开启webpack source map

devtool: "eval-source-map",

// 开启webpack dev server

devServer: {

contentBase: "./build",

historyApiFallback: true,

hot: true,//热模块替换

inline: true,// 源文件改变时自动刷新页面

port: 8080,

// progress: true

},

// 配置plugin

plugins: [

// 热加载： 修改代码自动刷新浏览器

new webpack.HotModuleReplacementPlugin(),

// 生成h5文件

// new HtmlwebpackPlugin({

//  title: "SAME"

// })

],

module: {

// 配置 preLoaders, 将eslint 添加进入

// preloaders: [],

// 配置loader, 将Babel 添加进去

// loaders: [{

//     test: /\.jsx?$/,

//     loader: "babel-loader",

//     exclude: "node_modules",

//     include: APP_PATH

// }, {

//     test: /\.less/,

//     exclude: "node_modules",

//     include: APP_PATH,

//     loader: "style!css!autoprefixer!less",

//     // loaders: ["style", "css", "autoprefixer", "less"]

// }, ]

rules: [{

test: /\.less$/,

use: [

"style-loader",

"css-loader",

"autoprefixer-loader",

"less-loader"

]

}, {

test: /\.css$/,

use: [

"style-loader",

"css-loader",

"autoprefixer-loader"

]

}, {

test: /\.jsx$/,

loader: "babel-loader"

}]

}

}

* css-loader：使你能够使用@import，url（...）的方式引入css文件，style－loaders：使用将所有计算的样式加入页面

* 感叹号的作用： 同一个文件能够使用不同类型的loader