webpack 是一个打包工具，进行代码分割，模块通过loader处理各种文件，模块打包器，按需加载，使初始化加载时间更短，适合大型项目。模块热更新
1.先初始化package.json ，执行 npm init
2.安装对应的模块加载，css-loader,vue-loader等
3.新建文件夹，放文件
4.新建app.vue 组件
5.新建入口文件，index.js
6.新建webpack.config.js
<pre>
<code>
const path = require(''path);
const isDev = process.env.NODE_ENV === 'development';
const config = {
target:'web',
enrty:path.join(__dirname, 'src/index.js'),
output: {
filename:'bundle.js',
path: path.join(__dirname,'dist')
},
module: {
rules: [
{
test: /\.vue$/,
loader:'vue-loader'
},
{
test: /\.css$/,
use: [
'style-loader',
'css.loader'
]
},
{
test: /\.(gif|jpg|jpeg| png|svg)$/,
use: [
{
loader:'url-loader',
options: {
limit:1024,
name: '[name]-xxx.[ext]'
}
}
]
}
]
},
plugins: [
new webpack.DedinePlugin({
'process.env': {
NODE_ENV: isDev ? '"development":"production"'
}
}),
new HTMLplugin()
]
}
if(isDev) {
// 用来在页面进行js调试
config.devtool = '#cheap=module-eval-source-map',
config.devServer = {
port: 8000,
host:'0.0.0.0',
// 把错误显示在网页上
overlay: {
errors: true,
},
open: true,
// 热更新，只改变当前组件的变化，防止其他的信息不见了
hot: true,
config.plugins.push(
new webpack.HotMoudleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
),
//做路由配置
historyFallback: {
}
}
}
module.exports = config
</code>
</pre>
url-loader 是依赖file-loader 是对file-loader的封装，先读取文件的大小，然后判断大小，把小一点的图片打包在css里面，减少请求的次数。
7.在package.json里面添加脚本，build："webpack --config webpack.config.js".之所以在里面添加，是因为外面调用webpack是全局的，而项目里面的版本和外面的可能不一样。
8. 配置webpack-server ，在package.json 文件里面，先安装cross-env 用来告诉webpack是生产环境还是开发环境，不直接写的原因是不同操作系统的写的方式不一样，如果直接写在里面，要写两个。修改package.json 文件，build： "cross=env" NODE_ENV = production webpack --config webpack.config.js' . dev: cross=env" NODE_ENV = development webpack-dev-server --config webpack.config.js'
9. 安装html-webpack-plugins .
### webpack 4.12 新的不同点。
####1.webpack 和webpack-cli分离开了，所以全局安装完webpack 还需要安装webpack-cli。执行webpack a.js b.js 是把a打包成b，但是会报错。CLI（命令行工具）已经转移到了一个单独的包webpack-cli中。
除了webpack自身外，请额外全局安装webpack-cli来使用CLI。执行npm uninstall webpack-cli
npm install -g webpack-cli
####2配置开发还是生产模式
<pre>
<code>
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
</code>
</pre>
提示我们没有配置webpack的mode选项，默认有production和development两种模式可以设置，因此我们尝试设为development模式，在命令行输入：webpack --mode development. 重新执行，你的项目已经可以成功打包一半了
####3.入口文件位置发生变化
但是会报错如下
<pre>
<code>Module not found: Error: Can't resolve 'hello.bundle.js' in '/xdev/webpack/newwebpack'</code>
</pre>
意思就是没有找到入口模块。
也就是说webpack4以上重新调整了打包模块的入口文件位置。这里我是看到别人写的说是调整到src下面了，然后把你的hello.js移动到src下面，并且改成index.js。
#### 4. 打包方式发生变化
再次执行。 webpack index.js bundle.js
会提示can.t resolve相关的错误。
原因是，webpack4.x的打包已经不能用webpack 文件a 文件b的方式，而是直接运行webpack --mode development或者webpack --mode production，这样便会默认进行打包，入口文件是'./src/index.js'，输出路径是'./dist/main.js'，其中src目录即index.js文件需要手动创建，而dist目录及main.js会自动生成。 通过配置也可以更改打包文件名，在没有配置的情况下，会直接生成mian.js
因此我们不再按webpack 文件a 文件b的方式运行webpack指令，而是直接运行
webpack --mode development
或者
webpack --mode production。
这样便能够实现将'./src/index.js'打包成'./dist/main.js'。
####5.将打包指令加入package.json
不过每次都要输入这个命令，非常麻烦，我们在package.json中scripts中加入两个成员：
"dev":"webpack --mode development",
"build":"webpack --mode production"
以后我们只需要在命令行执行npm run dev便相当于执行webpack --mode development，执行npm run build便相当于执行webpack --mode production。
我们在根目录执行：
npm run dev
可以看到根目录下生成了dist目录，并且dist目录下生成了main.js文件，main.js文件已经打包了src目录下index.js文件的代码。
####6. 配置webpack 其他打包参数
在package.json 里面script里加入
webpack --mode development --watch --progress --display-modules --colors --colors 打包这个模块的原因--display-reasons
这的意思是，watch监听文件变化，可以自动打包，progerss可以看到打包的进度 display-modules 打包的模块 打包的文字是彩色的 还有打包的原因。
#### 7. 使用require 引入css文件的时候，需要手动指定用哪些loader进行处理，否则还是会报如下的错误
<pre><code>ERROR in ./src/assets/css/hello.less 1:10
Module parse failed: Unexpected token (1:10)
You may need an appropriate loader to handle this file type.</code></pre>
意思就是没有找到合适的loader进行css文件的处理,进行修改如下。
require('css-loader!./assets/css/hello.less')执行npm run dev 显示成功。打开页面，但是页面css并没有生效，想要文件生效，还需要用到style-loader less-loader 这里有个坑哇，一定要注意顺序。如下：require('style-loader!css-loader!less-loader!./assets/css/hello.less')。重新执行，页面运行正常了。
#### 8.再多页面应用中，可以定义多个入口。
<pre><code>
enter:{
main: '',
page:''
},
output: {
path:'',
filename:'[name]-[hash].js'
}
</code></pre>
####9.解决手动解决文件引入的问题
安装: cnpm i html-webpack-plugins -save-dev ,我安装的时候，一直报语法错误，找了好久，后来终于发现，是package.json 多了一个，哈哈哈，想抽自己几下。安装后进行配置： plugins: [
new HtmlWebpackPlugin({template: 'index.html'})
]，然后重新执行，就会把index.html 复制一份，到dist目录下，自动引入打包后的文件。 在配置了index为模块后，就出现了另一个问题，那就是直接拷贝了模版的链接，但是显然两个文件的是不一样的。所以这里需要去掉，根目录下index里的引入文件。publicPath:'http://cdn.com',主要用于设置上线地址。以这个绝对路径为开头。
####10.配置多个页面html
复制 new HtmlWebpackPlugin（{chunks[a]用于指定当前文件，excludeChunks[a,b]排除法}）
####11.减少http请求，使性能达到极致。在github上，HtmlWebpackPlugin ，官方为了解决问题的demo： script(type="text/javascript") !{compilation.assets[jsFile.substr(htmlWebpackPlugin.files.publicPath.length)].source()
<%=
compilation.assets[HtmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source()%>
这样写会报错，解决办法还没找到，初步觉得是模版解析的问题。
####11.postcss-loader
这个官网给了几种配置，在webpack里使用要单独写一个配置文件，还有哇，module.exports = {
// parser: 'sugarss',
plugins: {
'postcss-import': {},
'postcss-cssnext': {},
'cssnano': {}
}
}，这个sugarss，居然是个.sss为后缀名的css解析，不能用{},一直报错这个Unnecessary curly bracket，显示是语法错误。
###没有解决的问题： 1.自动读取外链文件引入 2.image-webpack-loader 无法添加到指定文件夹 3。热更新。
总结： 1、webpack-cli必须要全局安装，否则不能使用webpack指令；
2、webpack也必须要全局安装，否则也不能使用webpack指令。
3、webpack4.x中webpack.config.js这样的配置文件不是必须的。
4、默认入口文件是./src/index.js，默认输出文件./dist/main.js。
