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
