webpack 简单配置
1.webpack 是一个现代JavaScript 应用程序的静态打包器，它能够把各种资源，例如JS,样式，图片
等都作为模块来使用处理,将许多松散的模块按照依赖和规则打包成符合生产部署的前端资源，
还可以将按需加载的模块进行代码分割，等到实际需要的时候再异步加载。
2.安装
前提条件，请确保安装了Node.js的最新版。
进入相应的文件夹
首先执行 进入相应的文件夹 npm init 初始化
然后可以全局安装 npm install webpack --save-dev
安装指定的版本使用:npm install webpack@3.0.0 --save-dev
安装好之后写一个hello.js 进行打包
3.建立项目的webpack 文件
首先初始化目录: npm init
然后安装webpack: npm install webpack --save-dev
如果webpack 的配置文件不使用默认的文件名webpack.config.js
那么在执行打包的时候，就要指定配置文件的名字
例如： 配置文件的名字为 webpack.dev.config.js
webpack --config webpack.dev.config.js
webpack 的打包命令可以结合 npm 的脚本使用例如：
那么执行的命令为 : npm run webpack
4.配置:
(1) Entry 应用程序的起点入口，可以是一个文件，如果传递一个数组，那么那么数组的每一
项都会执行，也可以是一个对象。
例如：
entry: "./app/entry", // string | object | array
entry:["./app/entry1", "./app/entry2"],
entry: { a: "./app/entry-a", b: ["./app/entry-b1", "./app/entry-b2"] },(2) Output 位于对象最顶级键(key),包括了一组选项，指示webpack 如何输出，
以及哪里输出，和他你所打包或使用webpack 载入的任何内容。
例如：
output: {
// webpack 如何输出结果的相关选项
path: path.resolve(__dirname, "dist"), // string
// 所有输出文件的目标路径
// 必须是绝对路径（使用 Node.js 的 path 模块）
filename: "bundle.js", // string
filename: "[name].js", // 用于多个入口点(entry point)（出口点？）
filename: "[chunkhash].js", // 用于长效缓存
// 「入口分块(entry chunk)」的文件名模板（出口分块？）
publicPath: "/assets/", // string
publicPath: "",
publicPath: "https://cdn.example.com/",
// 输出解析文件的目录，url 相对于 HTML 页面
library: "MyLibrary", // string,
// 导出库(exported library)的名称
libraryTarget: "umd", // 通用模块定义
libraryTarget: "umd2", // 通用模块定义
libraryTarget: "commonjs2", // exported with module.exports
libraryTarget: "commonjs-module", // 使用 module.exports 导出
libraryTarget: "commonjs", // 作为 exports 的属性导出
libraryTarget: "amd", // 使用 AMD 定义方法来定义
libraryTarget: "this", // 在 this 上设置属性
libraryTarget: "var", // 变量定义于根作用域下
libraryTarget: "assign", // 盲分配(blind assignment)
libraryTarget: "window", // 在 window 对象上设置属性
libraryTarget: "global", // property set to global object
libraryTarget: "jsonp", // jsonp wrapper
// 导出库(exported library)的类型
/* 高级输出配置（点击显示） */
pathinfo: true, // boolean
// 在生成代码时，引入相关的模块、导出、请求等有帮助的路径信息。
chunkFilename: "[id].js",
chunkFilename: "[chunkhash].js",
// 长效缓存(/guides/caching)
// 附加分块(additional chunk)」的文件名模板
jsonpFunction: "myWebpackJsonp", // string
// 用于加载分块的 JSONP 函数名
sourceMapFilename: "[file].map", // string
sourceMapFilename: "sourcemaps/[file].map", // string
// 「source map 位置」的文件名模板
devtoolModuleFilenameTemplate: "webpack:///[resource-path]", // string
// 「devtool 中模块」的文件名模板
devtoolFallbackModuleFilenameTemplate: "webpack:///[resource-path]?[hash]", // string
// 「devtool 中模块」的文件名模板（用于冲突）
umdNamedDefine: true, // boolean
// 在 UMD 库中使用命名的 AMD 模块
crossOriginLoading: "use-credentials", // 枚举
crossOriginLoading: "anonymous",
crossOriginLoading: false,
// 指定运行时如何发出跨域请求问题
/* 专家级输出配置（自行承担风险） */
devtoolLineToLine: {
test: /\.jsx$/
},
// 为这些模块使用 1:1 映射 SourceMaps（快速）
hotUpdateMainFilename: "[hash].hot-update.json", // string
// 「HMR 清单」的文件名模板
hotUpdateChunkFilename: "[id].[hash].hot-update.js", // string
// 「HMR 分块」的文件名模板
sourcePrefix: "\t", // string
// 包内前置式模块资源具有更好可读性
},3)Plugins
例如： 安装 html-webpack-plugin
命令： npm install html-webpack-plugin --save-dev
首先在webpack.config.js 中引入插件
var htmlWebPackPlugin = require('html-webpack-plugin');
然后在:
plugins: [
new htmlWebPackPlugin({
// 指定生成的文件的名字
filename:'index.html',
// 指定html 模板
template:'index.html',
// 标签生成的位置
inject:'head',
/* title:'webpack is good',
data: new Date()*/
minify:{
// 删除注释
removeComments:true,
// 删除空格
collapseWhitespace: true
}
})](4)loader
loader 就是webpack 用来预处理模块的，在一个模块被引入之前，会预先
用loader处理模块的内容。
安装css loader
npm install style-loader css-loader --save-dev
npm install postcss-loader --save-dev
npm install autoprefixer --save-dev
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader',
// 处理浏览器前缀
{ loader: 'postcss-loader',
options: {
plugins: [require('postcss-import'),
require('autoprefixer')],
browser: ['last 5 versions'] } }]
}sass
npm install sass --save-dev
npm install sass-loader --save-dev
{ //sass打包处理,加载从右向左，注意顺序
test:/\.sass$/,
use: [
{loader: "style-loader"},
{loader: "css-loader"},
{loader: "postcss-loader",options:{
plugins:[require('postcss-import'),require('autoprefixer')] //自动处理class加前缀，-ms-和-webkit-
}},{loader: "sass-loader"}
]
}图片处理
npm install file-loader --save-dev
{
// 图片处理
test:/\.(png|jpg|jpeg|gif|svg)$/i,
use:[
{
loader:'file-loader',
options:{
name:'src/assets/[name]-[hash:5].[ext]'
}
}
]
}
npm install url-loader --save-dev 可以将图片转为base64
{
// 图片处理
test:/\.(png|jpg|jpeg|gif|svg)$/i,
use:[
{
loader:'url-loader',
options:{
limit:20000000,
name:'src/assets/[name]-[hash:5].[ext]'
}
}
]
}(5)devServer
安装命令：
npm install webpack-dev-server --save-dev
在 package.json 中的 scripts 中添加 "start": "webpack-dev-server"
devServer: {
// 自动打浏览器
open:true,
// 访问端口
port:8090,
}