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'})]

webpack相关笔记

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

webpack相关笔记

inject表示js在head里面

webpack相关笔记

htmlWebpackPlugin里面的title属性

webpack相关笔记

index.html里面的写法

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

webpack相关笔记

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

参考：链接链接1

webpack相关笔记

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

webpack相关笔记

七：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，处理浏览器前缀的后处理工具

秒客网

webpack相关笔记

相关文章