webpack4学习之路-1

1.什么是webpack

webpack可以理解为模块打包机，可以将项目中的文件，转换成js文件，方便浏览器的加载。因为在我们的开发过程中出现了像less，sass等工具方便我们的开发，但是这些文件并不能直接被浏览器识别，需要进行额外的处理，但是我们手动处理又很繁琐。webpack的出现很好的解决了这个问题。

2.webpack的工作方式

把项目当做一个整体，通过给定一个入口文件（index.js）来找到项目中的所有依赖文件，通过loader来解析成一个或者多个js文件

3.安装webpack

webpack4中要安装webpack和webpack-cli

npm install webpack webpack-cli -D
-D等价于--save-dev 指开发环境中的依赖，保存在package.json中的 devDependencies中

4. 0配置打包

webpack4支持0配置打包，不需要开发者写配置文件，但是这样很受限
说到这里要提一个node v8.2之后出现的一个工具npx

4.1 什么是npx

npx想要解决的主要问题，就是调用项目内部安装的模块，npx 的原理很简单，就是运行的时候，会到node_modules/.bin路径和环境变量 $PATH 里面，检查命令是否存在。如果不存在npx将会把包下载到一个临时目录，使用以后再删除。

痛点

• 全局安装占用本地空间
• 不同开发人员使用的依赖可能不同

npx 的优点

• npx的流程，先寻找本地是否有依赖，如果有使用本地的，如果没有下载最新的
• 使用完时候不会在本地留存

npx webpack  
npx webpack --mode development //开发者模式
不设置mode会默认为生产模式，会压缩代码

执行npx webpack 的时候，webpack会自动查找项目中src目录下的index.js，生成一个disc目录并存放在打包好的main.js中

5. 手动配置

创建webpack.config.js（webpack默认配置文件名），配置项都写在里面,可以叫其他名字，需要配置

// 写在package.json中的scripts下（脚本）
"scripts": {
    "build": "webpack --config webpack.config.js"
  },
//需要运行时输入
//npm run build 等价于webpack --config webpack.config.js这里可以更改配置文件的名字

Tips！：webpack是基于node的，所以模块化规范和node相同，都使用CommenJS

module.exports = {
	entry:'',   					//入口文件
	output:{},						//出口文件
	plugins:[],						//处理对应的模块
	devServer:{}					//开发服务器配置
	mode:'development'				//模式配置
}

devServer

启动devServer需要安装webpack-dev-server，安装后可以配置脚本

// package.json中
"scripts": {
    "dev":"webpack-dev-server"
 },
运行时输入
npm run dev
使用devserver不会打包出文件，

5.1 上手

let path = require('path')
console.log(path.resolve('dist'));
module.exports = {
    devServer: { //开发服务器的配置
        port: 3000,
        progress: true,
        contentBase: './dist' //输入端口后默认，出口目录下的index.html
    },
    mode: 'development', //模式 生产，开发 production  development
    entry: './src/index.js', //入口
    output: {
        filename: 'bundle.[hash:8].js', //打包后的文件名
        path: path.resolve(__dirname, 'dist') //绝对路径,path.resolve()当前目录下解析出绝对路径目录
    },
    plugins: [ //数组 放着所有的webpack插件]
}

以上是最基础的webpack文档配置，目前只可以打包指定的js文件

5.2 打包html

要用到html-webpack-plugin，使用devServer后，并不会为我们创建出实际的文件也不会自动创建html（没有dist目录的情况下，会请求不到），如果我们想让他自动创建并打包到内存中，自动创建html并引入并打包到内存中，配合devServer

安装
cnpm i html-webpack-plugin -D

此时的webpack.config.js

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'end.js',
        path: path.resolve(__dirname, 'out')
    },
    mode: 'development',
    devServer: {
        port: 3000,
        progress: true,
        contentBase: './out'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', 			//模板
            filename: 'index.html'					//生成后的名字
        })
    ]
}

----------------------------------------------\
npm run dev

可以看到目录中并没有创建实际的文件，但是访问3000端口页面可以正常访问了


它确实创建了两个文件

接下来我们希望他上线的时候可以压缩代码

切换为生产模式后运行
npm run build
----------------------------
js代码会压缩
html代码不会压缩

压缩html

plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true, //删除双引号
                collapseWhitespace: true, //去掉空格和换行

            },
            hash: true //添加哈希戳，解决缓存问题，有更改时会产生新的文件，防止覆盖
        })
    ]