webpack认知

什么是webpack

总结 。webpack侧重打包，将前端所有的资源作为模块进行开发（例如图片 css文件 js文件等）通过loader(加载器)和plugins(插件)进行处理 打包成为符合生产环境部署的前端资源。
官方定义

webpack is a module bundler. Its main purpose is to bundle JavaScript
files for usage in a browser, yet it is also capable of transforming,
bundling, or packaging just about any resource or asset. webpack
可以看做是模块打包机：它做的事情是，分析你的项目结构，找到 JavaScript
模块以及其它的一些浏览器不能直接运行的拓展语言，并将其转换和打包为合适的格式供浏览器使用。

我的理解：前端内容逐渐丰富，功能也渐渐完善而独立，这时可以说是所谓面向对象，也可以说是模块化的思想出现在了更多人的脑海中。但是js本身是没有类似node的包管理机制的 ，所以webpack解决了一些问题。形象的说就是我们在开发的过程中，一些便于开发的资源（通过更方便的扩展语言书写代码，或是使用别人已经写好的模块直接使用直接展示等等）更加优雅的出现在它理所应当的地方。

安装
（类似node 在使用的时候还是需要安装包一些插件，下载速度让人知道了cnpm的必要性）

• 首先 基于node
• 命令行：npm install -g webpack(全局安装)。在4.0版本之前 安装完成就可以用命令行 webpack -v(-h)等这些测试，通过即可。在大多数教程中都是3.几的 ，所以在学习的时候一定会遇见这样的问题。上述测试结果会提示缺少一个webpack cli 询问是否安装。这时候不安装。安装以后还是会遇见相同的问题。手动输命令行安装 npm install webpack-cli -g,顺溜解决
• 好了安完了

简单使用
在不使用配置文件的情况下的使用

• 首先要一个文件夹(hello-webpack) 自己创建或者$ mkdir hello-webpack,存放webpack用。
• $ npm init(初始化)会有一些基础问题 可以回车过 这时候会有一个json文件 （package.json）里面有版本信息啊这些基本内容
• 集成webpack 这时候需要在本地装一次 $ npm install --save-dev webpack.这时候package,json文件会加上两行 有webpack的版本信息 就是告诉你可以用了 也给看代码的人知道需要装哪个版本的webpack来支持
• 先创建两个文件夹src(用来放本地源代码)和dist(放webpack编译之后的展示文件) 在src里面随便创建一个js文件，（app.js）
• 输入命令行 & webpack ./src/app.js -o ./dist/app.bundle.js(在更多教程中支持的是3点几的版本 命令是$ webpack ./src/app.js ./dist/app.bundle.js)
• 在dist文件夹中出现了app.bundle.js就算成了。文件有点长但是大多数都是注释掉的。有用的代码就是我们编写的app.js

配置文件

moudle.exports = {
entry:'./src/app.js',
output{
        filename:'./dist/app.bundle.js'
    }
}

文件名为 webpack.config.js
entry是入口文件（源文件）output则是输出文件。
很明显，如果在实际使用中还是用命令行来操作会显得不那么灵活，配置文件更为合适。在使用的时候直接在终端输webpack 就会自己找webpack.config.js 去操作
接下来是修改package.json的script部分。
比如增加

"scripts": {
    "dev": "webpack -d --watch",
    "prod": "webpack -p"
  },

第一行检测代码变化，第二行压缩
使用的时候命令行$ npm run dev
-d的作用是增加了source maps 在浏览器调试的时候可以定位到源文件
接下来要让更多东西出现在dist里 。
首先是html文件
首先可以手动在dist文件夹里写htm文件 但是写死以后 我们想用的js文件就不那么方便的添加进去了。如果dist里面会随时添加进新的js文件，或者js文件名带哈希编码每次不同，那手动修改html的代价就会很大，所以一般不会选择手动去写

安装一个插件 html-webpack-plugin
$ npm install html-webpack-plugin --save-dev,
然后修改webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname + '/dist',
    filename: 'app.bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
};

有点像node的风格
跑起来就能看见生成的html文件了 甚至连title都写好了
如果想要修改的话也很容易

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname + '/dist',
    filename: 'app.bundle.js'
  },
  plugins: [new HtmlWebpackPlugin(
      title:'hello world'
  )]
};

内容部分就需要我们在src里面自己写一个index .html ，再加上template属性，指向我们写的html文件

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname + '/dist',
    filename: 'app.bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
    template: './src/index.html',
  })]
};

在展示的时候 js和css都很容易加 ，js解释过了，在src中写就完事了，写完在托管一下，改好webpack.config.js就能行了，webpack会自己绑到html文件里的，接下来说css
从前面的可以想到需要的应该就是插件，然后自己写css，最后改webpack.config.js就可以了。的确是这样
插件：
首先要知道的是 loader 类似于 task，能够处理文件，比如把 Scss 转成 CSS，TypeScript 转成 JavaScript 等。起到扩展语言的转化功能方便开发。但是我说的只是css的转接
$ npm install --save-dev css-loader style-loader

安装以后

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname + '/dist',
    filename: 'app.bundle.js'
  },
  plugins: [new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html',
  })],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
};

差不多了 在学到后面好用的会继续分享
补充一个插件
webpack-dev-server
安装以后（$ npm install --save-dev webpack-dev-server）
使用时 $webpackdev-server会发现功能上首先可以代替刚才的watch就是$ npm run dev
再其次直接开了一个本地服务器 挂在localhost:8080上，也可以在webpack.config.js上做修改 使得直接打开浏览器
在module.exports = {}加上

devServer: {
    open: true
  }

就能直接打开了。