webpack入门详解(基于webpack 3.5.4 2017-8-22)
webpack常用命令:
webpack --display-error-details //执行打包
webpack -w // 提供watch方法;实时进行打包更新
webpack -p // 对打包后的文件进行压缩
webpack -d // 提供source map,方便调式代码
webpack -dev-server --open //运行webpack开发服务
webpack --config webpack.custom.config.js //指定webpack配置文件
webpack --colors //输出结果带彩色,比如:会用红色显示耗时较长的步骤
webpack –profile //输出性能数据,可以看到每一步的耗时
webpack --display-modules //默认情况node_modules下的模块会被隐藏,加上这个参数可以显示这些被隐藏的模块
webpack是什么
webPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。
安装
//全局安装
npm install webpack -g
//安装到你的项目目录
npm install -save-dev webpack
配置webpack配置文件
配置文件名:webpack.config.js,执行命令:webpack --display-error-details
import path from 'path'
import config from "./webpack.config"
import merge from "webpack-merge"
import webpack from "webpack"
import webpackDevServer from "webpack-dev-server"
import { format } from 'util' let PORT = ;
let PUBLIC_PATH = "http://localhost:" + PORT + "/";
let webpackConifg = merge(config, {
devtool: "source-map",//生成Source Maps,模式有source-map,cheap-module-source-mapeval-source-map,cheap-module-eval-source-map
//debug: true, webpack2 已切换到plugins中,据说在3中将取消
entry: {
main: [
format("webpack-dev-server/client?%s", PUBLIC_PATH),
"webpack/hot/dev-server",
"./src/main/main.ts" //唯一入口文件
]
},
output: {
path: path.resolve(__dirname, '../../dist'),//打包后输出文件的文件夹
publicPath: PUBLIC_PATH,
filename: '[name].js'
},
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: ["es2015", "react"]
}
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}
]
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=10000&name=build/[name].[ext]'
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.BannerPlugin('版权所有,翻版必究'),
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html"//new一个这个插件的实例,并传入相关的参数
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin("style.css")
]
})
const compiler = webpack(webpackConifg);
new webpackDevServer(compiler, {
inline: true,
hot: true,
port: PORT,
stats: {
colors: true
}
}).listen(PORT, 'localhost', (err) => {
console.log("localhost listen error")
})
//常见webpack配置
// 一个常见的webpack配置文件
const webpack = require('webpack'); //定义常量
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = {
entry: __dirname + "/app/main.js",//唯一入口文件
output: {
path: __dirname + "/build", //输出文件
filename: "bundle-[hash].js"
},
devtool: 'none',
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//失败不跳转
inline: true,
hot: true
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}
]
}
]
},
plugins: [
new webpack.BannerPlugin('版权所有,翻版必究'),
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例,并传入相关的参数
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin("style.css")
],
};
配置package.json文件
创建一个package.json文件或者在终端中使用npm init命令可以自动创建这个package.
模板:
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "Sample webpack project",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open"
},
"author": "zeng",
"license": "ISC",
"devDependencies": {
"webpack": "^3.5.4"
}
}
//注:JSON文件不支持注释,引用时请清除注释
配置webpack开发环境
npm install --save-dev webpack-dev-server
配置webpack的devserver选项
Loaders:通过使用不同的loader,webpack有能力调用外部的脚本或工具,实现对不同格式的文件的处理。
Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置
test:一个用以匹配loaders所处理文件的拓展名的正则表达式(必须)
loader:loader的名称(必须)
include/exclude:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);
query:为loaders提供额外的设置选项(可选)
Babel安装
// npm一次性安装多个依赖模块,模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
CSS安装
npm install --save-dev style-loader css-loader
参考资料:https://doc.webpack-china.org/configuration/
https://zhaoda.gitbooks.io/webpack/content/module-system.html