webpack简单介绍

webpack

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

https://www.webpackjs.com

rollup

pacel

​ 如果全局 没有安装 运行局部 在package.json scripts脚本中运行

四个核心概念

• 入口(entry)

  默认的入口是 src目录下的index.js

• 输出(output)

  dist

• loader

• 插件(plugins)

• 模式 production/development

命令webpack

安装

mkdir webpack-demo
npm init
npm install webpack webpack-cli -D
package.json

新建项目目录 src

src
	index.js  默认是如果没有配置 
		console.log("hello webpack");

运行webpack 报错  没有全局安装
package.json
	"scripts":{
		"build":"webpack"
	}

	//设置mode
	"scripts":{
		"build":"webpack --mode production"
	}

webpack配置文件

1，根目录下 新建webpack.config.js
const  path  =  `require`('path');
module.exports={
    //入口文件的配置项
    entry:{},
    //出口文件的配置项
    output:{},
    //模块：例如解读CSS,图片如何转换，压缩
    module:{},
    //插件，用于生产模版和各项功能
    plugins:[],
    //配置webpack开发服务功能
    devServer:{}
}

entry:{
    //里面的entery是可以随便写的
    entry:'./src/entry.js'
},
//出口文件的配置项
output:{
    //打包的路径文职
    path:path.resolve(__dirname,'dist'),
    //打包的文件名称
    filename:'bundle.js'
    
},
多入口
entry:{
    //里面的entery是可以随便写的
    entry1:'./src/entry1.js',
    entry2:"./src/entry2.js"
},	
出口
output:{
    //打包的路径文职
    path:path.resolve(__dirname,'dist'),
    //打包的文件名称
    filename:'[name].js'
    filename:'[name].[hash].js'   //加hash
    filename:'[name].[chunkHash].js'  //根据内容是否变化
    filename:'[name].[chunkHash:8].js'
}
自定义webpack.config.js
新建 scripts文件夹中  将配置文件 放进文件夹中，且可以自定义名字
	config.js
package.json中指定
"scripts":{
	"build":"webpack --mode production --config scripts/config.js"
 }
此时注意出口问题
output:{
    //打包的路径文职
    path:path.resolve(__dirname,'dist'),  //目录不对了 使用
    path:path.resolve(process.cwd(),'dist'),//node的运行目录
    //打包的文件名称
    filename:'[name].[chunkHash:8].js'
}

配置基本开发环境

1，src下新建html

src/public/index.html

使用html-webpack-plugin处理html，

安装：npm i html-webpack-plugin -D

配置文件中：

const htmlPlugin = require('html-webpack-plugin');
 plugins: [
    	new HtmlWebpackPlugin({
        title: 'My App',  //指定html的title
        template: 'src/assets/index.html'  //指定处理哪个html
    	})
  ]

<%= htmlWebpackPlugin.options.title %> 在html中引入title

2，处理css

style-loader css-loader
处理结果：
css loader将css转换成webpack可识别的js
style-loader新建 style标签 插入到head中
npm i style-loader css-loader -D
如何配置loader

	style.css
入口文件中
	import "./css/style.css"

module: {
    rules: [
       {
         test: /\.css$/,
         use: ['style-loader', 'css-loader'], //执行顺序从后往前 
        },
        ],
   },
   此时：css是在打包的js中，实际开发中，经常需要单独提取css
   
   loader写法：
   1，
   module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },
    2，
    module:{
        rules:[
            {
                test:/\.css$/,
                loader:['style-loader','css-loader']
            }
        ]
    },
    3，
    module:{
        rules:[
            {
                test:/\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    },

3， 如何分离css

mini-css-extract-plugin

npm install --save-dev mini-css-extract-plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

 plugins: [
    new MiniCssExtractPlugin({
      //filename: '[name].css',
      //filename: '[name].[chunkhash:8].css', //加hash
      filename: 'css/[name].[chunkhash:8].css', //加hash 统一放进css中
    }),
  ],
  
  
   module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
        ],
      },
    ],
  },

4，本地服务器开启

webpack-dev-server

npm install webpack-dev-server --save-dev
scripts": {
  "start": "webpack-dev-server"
}

devServer:{
	proxy: {
      "/api": {
        target: "http://localhost:3000",
        pathRewrite: {"^/api" : ""}
      }
    },
    contentBase: path.join(__dirname, "dist"),
    hot: true, 
    port:4000,
    open:true
    
}

5，处理 css预处理器

less

npm i less less-loader -d

module: {
    rules: [
      {
        test: /\.less$/,
        loader: 'less-loader', // compiles Less to CSS
      },
    ],
  },
  
 
 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
       {
        test: /\.less$/,
        use: [
           MiniCssExtractPlugin.loader,
          {
          	loader:'css-loader'
          },
          'less-loader'
        ],
      },
    ],

6,处理css前缀

::placeholder
postcss-loader 注意使用顺序
autoprefixer 插件

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
        ],
      },
       {
        test: /\.less$/,
        use: [
           MiniCssExtractPlugin.loader,
          {
          	loader:'css-loader'
          },
          'postcss-loader',
          'less-loader'
        ],
      },
    ],
    跟目录创建
    
    postcss.config.js  postcss-loader 配置文件 中引入 autoprefixer这个插件
    module.exports = {
      plugins: [
        require('autoprefixer')
      ]
    }
    
   broserslist  读取can i use 处理兼容性
   package.json 加
   
   "browserslist": [
    "last 2 versions",
    "not ie <= 8"
  	]

7，file-loader url-loader 处理图片资源

file-loader
	 {
                test: /\.(png|jpe?g|gif)$/i,
                use: [{
                    loader: 'file-loader',
                    options:{
                        name:'images/[name].[hash:8].[ext]',
                        publicPath:"../" //引入的路径
                    }
                }, ],
            }
     url-loader 对于图片的处理  可以将图片转成base64格式
    url-loader和file-loader之间的关系：url-loader中引入了file-loader 如果 图片 小于 url-loader限定值，使用url-loader 变成base64 如果 大于：使用file-loader 
     {
                test: /\.(png|jpg|gif)$/i,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                      limit: 22*1024,
                      //如果小于 这个值 就转换成 base64 如果大于 就 变成图片
                      name:'images/[name].[hash:8].[ext]',
                      publicPath:"../" //引入的路径
                    },
                  },
                ],
              }

8,copy-webpack-plugin 拷贝文件，处理不需要webpack处理的文件 如 字体文件

9,babel-loader 增加es6支持

10，vue-loader

vue-loader 
 
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 
rules 配置
{
	test: /\.vue$/,
	use: ['vue-loader']
},


plugins: [
		new VueLoaderPlugin(),
	]
main.js 入口
		render: h => h(App)    vue-loader提供的