Webpack整理

概念

webpack 是一个现代 JavaScript 应用程序的静态模块打包器，可以看做是模块打包机。

工作原理

分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。可以打包所有的资源、脚本、样式、图片、表。

基本使用

步骤：

• 始化项目：

npm init -y

• 下载 webpack

npm i webpack webpack-cli --save-dev

• 在项目的根目录下创建一个文件： webpack.config.js
• 在配置文件（webpack.config.js）中添加一个配置信息：

module.exports = {
    // 设置当前项目的入口
     entry: './src/main.js'
}

• 使用配置文件：修改 package.json 中的 scriprts 下面的 dev

"scriprts": {
	  "dev": "webpack --config webpack.config.js"
  }

• 重新打包项目

npm run dev

配置项

入口entry

entry: path.join(__dirname + '/src/main.js')

出口output

output: {
     filename: 'main.js', // 打包后生成的文件的名称
     path: path.join(__dirname + '/dist') // 打包后生成的文件的路径
}

项目模式mode

mode: "development"

resolve 解析

• 别名,配置@
• extensions
  • 作用：设置可省略的扩展名

resolve:{
   //别名
   alias:{
       "@":path.join(__dirname,'/src')
   },
   //可省略的扩展文件
   extensions:['.js','.css','.less','.scss','.vue']
}

源码映射：source map

• 作用：可以将打包之前的文件信息全部保存到打包之后的文件中

devtool:"source-map"

webpack中的loader（打包相应的文件）

webpack 默认只能打包 js 文件，无法打包其它文件，如果要打包其它文件必须借助对应的 loader
loader：帮助 webpack 打包其它的文件

• 打包 css：style-loader css-loader

moudle: {
 rules: [
    //加载css
    {
        test: /\.css$/,
        use: [
            'style-loader',
            'css-loader'
        ]
    }
  ]
}

• 打包 less ：less-loader
  • npm install sass-loader node-sass --save-dev

rules: [
  {
    test: /\.less$/,
    use: [
        'style-loader',
        'css-loader',
        'less-loader'
    ]
  }
]

打包sass同上： sass-loader

• 打包图片 & 字体: file-loader

//加载图片
{
    test: /\.(png|gif|svg|jpg)$/,
    use: ['file-loader']
},
//字体库
{
    test: /\.(ttf|woff2|woff|eot)$/,
    use: [
        'file-loader'
    ]
}

• 将 es6 打包为 es5：babel-loader

rules: [
  {
    test: /\.js$/,
    exclude: /(node-modules)/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env']
        }
    }
  }
]

• 打包vue：vue-loader
  • 下载包

npm install -D vue-loader vue-template-compiler

• 配置

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
	module: {
		rules: [
			{
				test: /\.vue$/,
				use: ['vue-loader']
			}
		]
	},
	plugins: [
		new VueLoaderPlugin()
	]
}

webpack 中的插件（添加额外功能）

• 1.html-webpack-plugin：将index.html 静态文件自动生成到 dist 目录下 const HtmlWebpackPlugin = require('html-webpack-plugin');

下载： npm install --save-dev html-webpack-plugin

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

module.exports = {
    plugins：[
            new HtmlWebpackPlugin({
                    title: 'hello world',
            template: path.join(__dirname, 'index.html')
            })
    ]
}

• 2.clean-webpack-plugin：在每次打包之前自动清除 dist 目录下的内容

下载： npm install clean-webpack-plugin --save-dev

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 配置包
module.exports = {
	plugins：[
		new CleanWebpackPlugin()
	]
}

• 3.webpack-dev-server：将我们的项目开启为一个服务器，这个服务器可以实时更新页面（只要代码发生了修改，就会刷新浏览器）

下载包：npm install --save-dev webpack-dev-server

//在 webpack.config.js 中配置
module.exports = {
   devServer: {
     contentBase: './dist',
     hot: true  // 模块的热替换,局部刷新
   },
}

// 在 package.json 中配置
{
    "scriptes": {
            "dev": "webpack --config webpack.config.js",
            "serve": "webpack-dev-server"
    }
}