本文目录一览：
- 1、webpack 能将html打包成js文件吗
- 2、webpack核心四要素总结
- 3、如何用webpack打包一个网站应用
- 4、webpack中是什么意思？有什么用？如何用
- 5、如何用 webpack 打包 node
- 6、webpack npm start和npm run server
webpack 能将html打包成js文件吗
load是个解析器，webpack只能加载js文件，但是开发vue是,vue文件；图片是png，jsx、json、EXE、等等这些都不是js文件；所以需要load解析器；把他们解析成js格式的文件，这样webpack就能加载处理了
webpack核心四要素总结
入口：webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。参数定义了打包后的入口文件，可以是个字符串或数组或者是对象；如果是数组，数组中的所有文件会打包生成一个filename文件；如果是对象，可以将不同的文件构建成不同的文件。
可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src。
entry: {
app: './src/main.js'
}
出口：webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程。
path: 打包文件存放的绝对路径
publicPath: 网站运行时的访问路径
filename:打包后的文件名
当我们在entry中定义构建多个文件时，filename可以对应的更改为[name].js用于定义不同文件构建后的名字。
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV ==='production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
}
Loader：webpack 能够去处理那些非JavaScript 文件（webpack 自身只理解JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
在webpack中JavaScript，CSS，LESS，TypeScript，JSX，CoffeeScript，图片等静态文件都是模块，不同模块的加载是通过模块加载器（webpack-loader）来统一管理的。loaders之间是可以串联的，一个加载器的输出可以作为下一个加载器的输入，最终返回到JavaScript上。
loader：loader的名称（必须）
include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
query：为loaders提供额外的设置选项（可选）
{
test: /.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /.js$/,
loader: 'babel-loader',
include: [resolve('src'),resolve('test'), resolve('node_modules/webpack-dev-server/client')]
}
插件：插件目的在于解决 loader 无法实现的其他事。插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。
plugins: [
new webpack.DefinePlugin({
'process.env':require('../config/dev.env')
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMRshows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
//
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname,'../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
])
]
如何用webpack打包一个网站应用
随着前端技术的发展，越来越多新名词出现在我们眼前。angularjs、react、gulp、webpack、es6、babel……新技术出现，让我们了解了解用起来吧！今天我来介绍一下如何用webpack打包一个网页应用。
一般我们写页面，大概都是这样的结构：
index.html
css
style.css
js
index.js
...........
这样我们的html里直接引用css和js，完成一个网页应用。用webpack也类似，只是webpack把图片、css和js都编译打包成一个文件，我们只需要引用一个文件就可以了。
1.我们需要先安装node环境。没安装的请自行安装
2.在项目目录下输入npm init初始化一个node项目，输入项目名称等信息，完成后生成一个package.json文件。
3.在项目目录下安装webpack
npm install --save-dev webpack
4.我们需要一个webpack.config.js文件，记录webpack配置信息。它的配置大概这样：
var webpack = require('webpack');
var path = require('path');
var buildPath = path.resolve(__dirname, 'build');
var config = {
//入口文件
entry: {
index : './src/js/index.js'
},
extensions: ['', '.js', '.json', '.css', '.less'],
output: {
path: buildPath, //编译后的文件路径
filename: 'app.js'
},
module: {
//Loaders
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{ test: /.css$/, loader: 'style-loader!css-loader' },
{ test: /.less$/,
loader: 'style-loader!css-loader!less-loader'
},
//.js 文件使用 babel 来编译处理
{ test: /.js$/, loader: 'babel' },
//图片文件使用 url-loader 来处理，小于8kb的直接转为base64
{ test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
};
module.exports = config;
我们需要指定编译的入口文件和输出的目录路径，以及css和js用什么loader处理，比如我使用了less，要编译less文件，就指定less-loader，js我要用es6来写，为了兼容性，用babel来转成es5的代码。如果要使用react，也可以指定jsx等的编译方式。
5.这些loader都是需要npm安装的
npm install --save-dev css-loader less less-loader style-loader url-loader babel babel-core babel-loader babel-preset-es2015
6.如果需要用babel，在项目目录下新建一个名为.babelrc的隐藏文件，里面这样写：
{"presets":["es2015"]}
保存。
7.根据配置可以看到我们需要一个src文件夹和一个build文件夹，src放图片、css和js的源代码，build作为输出文件夹放编译后的文件。
8.src/js/index.js文件作为我们的入口文件，我们在里面可以愉快地写es6的代码，比如：
'use strict';
require('../css/base.css');
require('../css/animate.css');
require('../css/style.less');
require('../js/zepto.min.js');
let a = 'world';
let hello = `hello ${a}`;
console.log(hello);
可以看到css我们都通过require的方式引进来，这样webpack会把css和js打包进一个文件。
9.我们还差个index.html，放在项目文件夹下就可以，正常写，引入build/app.js就可以啦！
10.让我们试试吧
webpack中是什么意思？有什么用？如何用
webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在默默处理这些事情，这块我们后续会提到。
如何用 webpack 打包 node
按照通常的做法, package.json中的dependencies都是会被项目require的依赖, devDependencies都是和环境相关的依赖, 如果自己也是这样的话(或者也可以改成这样), 那么只需要:
var json = require('./package.json') // 这个路径视当前的路径进行对于修改
module.exports = {
entry: {
app: path.resolve(__dirname, 'app/index.jsx'),
// 将 第三方依赖 单独打包
vendor: Object.keys(json.dependencies)
},
output: {
path: __dirname + "/build",
filename: "[name].[chunkhash:8].js",
publicPath: '/'
},
// ...省略若干行...
plugins: [
// ...省略若干行...
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: '[name].[chunkhash:8].js'
})
]
}
webpack npm start和npm run server
最近开始学习webpack，webpack可以看做是模块打包机，分析项目结构，找到JavaScript模块和一些浏览器不能直接运行的语言，类似Scss,JSX,Typescript等，并将其转换和打包为合适的格式供浏览器使用。
没有比较性
Gulp/Grunt是一种能够优化前端的开发流程的自动化工具，webpack是模块化的解决方案，本质上就不是一样，而且在很多时候，webpack可以替代前面两者的工作
webpack是webpack自带的一条打包命令，是最基本的打包命令。
npm run webpack，则是在package.json文件中有一个script配置项，在这个script里面自定义的一条命令，它通过npm来运行。例如：
当脚本名为“start”时，可以省略“run”，直接为：
npm run server等也类似