webpack相关笔记

文档地址：链接

文档：https://doc.webpack-china.org/configuration/

慕课网地址：链接

参考地址：链接

1、webpack是一个前端打包工具，特点：代码分割（Code Splitting），Loaders,模块热更新

2、npm init

npm install webpack --save-dev
require('./world.js');//common.js方式
一、css-loader将css文件打包进js中，style-loader将js中的css输出到html中生成<style>标签。
二、css文件处理：
css-loader用来打包css文件
style-loader用来给html页面使用css
使用css-loader和style-loader前，要先安装
安装方法：npm install css-loader style-loader --save-dev
方式1：在js文件中，require('style-loader!css-loader!./style.css')。
方式2：在命令行中，webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader"。

三、监听文件改变，自动打包：webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --watch。
打包过程进度条：--progress。
显示打包进度条并显示打包的文件：--progress --display-modules。
打包原因：--display-reasons

四、webpack.config.js
没有webpack.config.js时，指定配置文件  webpack --config 配置文件.js
这个文件是webpack的默认配置文件，当运行wenpack的时候，自动查询这个文件

一些参数可以配置package.json里面，这样在cmd里面运行时就方便些

  cmd运行：npm run webpack

五。webpack.config.js里面的一些配置

  entry的相关知识：链接

output的相关知识：链接

三个占位符来区别不同文件：1、name 2、hash 3、chunkhash
hash和chunkhash的区别
hash：是每次打包的hash
chunkhash: 每个模块自己的hash值，可以理解为版本号，也可理解为md5值（保证每个文件的唯一性）

六、plugins  链接
在项目中，配置中有时候用的是hash或者chunkhash的文件名，这样每次都要在html里面配置，太麻烦，所以引入了plugins
webpack.config.js里面

1、安装 npm install html-webpack-plugin --save-dev
2、引用 var htmlWebpackPlugin = require('html-webpack-plugin');
3、使用 添加 plugins：[new htmlWebpackPlugin({template:'index.html'})]

疑问：为什么我们指定template的index.html，就代表的是根目录下的index.html。原因是module.exprots里面，有个context上行文属性，默认指的是运行环境的上下文，而我们的运行环境是根目录，所以template的index.html指的是根目录下的index.html

inject表示js在head里面

htmlWebpackPlugin里面的title属性

index.html里面的写法

可以在 htmlWebpackPlugin里面写其他属性，然后传递到html中

 如果想对打包的文件进行操作，可以再htmlWebpackPlugin里面的minify属性

参考：链接   链接1

 

现在这个是删除空格，效果是：

 七：module(loaders)

配置要使用的loader。对文件进行一些相应的处理。比如babel-loader可以把es6的文件转换成es5。大部分的对文件的处理的功能都是通过loader实现的。loader就相当于gulp里的task。loader可以用来处理在入口文件中require的和其他方式引用进来的文件。loader一般是一个独立的node模块，要单独安装。

loader配置项：

test: /.(js|jsx)$/,//注意是正则表达式，不要加引号，匹配要处理的文件
    loader: 'eslint-loader',//要使用的loader，"-loader"可以省略
    include: [path.resolve(__dirname, "src/app")],//把要处理的目录包括进来
    exclude: [nodeModulesPath]//排除不处理的目录

postcss-loader里面的autoprefixer，处理浏览器前缀的后处理工具