关于webpack打包文件

本篇文章借鉴《深入浅出weboack》

文件目录

dist是webapck打包后文件的输出目录
src是文件目录
webpack.config.js是webpack的配置文件

1.Entry

配置模块的入口，抽象为入口。

• context：在寻找context为根目录，context默认为启动的webpack当前工作目录
• entry：
  
• chunk
  entry为string、array时申城一个chunk，名称为chunk；
  entry为object时，生成多个chunk，chunk名称为object中的键名。
• 动态entry：项目中有多个页面需要配置entry，且页面数量不固定的增长，所以需要配置动态enrty。

//同步函数
entry: () => {
	return 
}
//异步函数

2.Output

3.

webpack.config.js

const path = require('path');

module.exports = {
	context: path.resolve(_dirname, 'app');
    entry: './src/app.js',  //输出路径
    output: {
        path: path.resolve(__dirname, 'dist'), //输出路径,__dirname表示为当前文件的路径下
        filename: "main.js"
    },
    mode: 'development',
    plugins: [    //配置plugins
    
    ]，
    module: [    //配置loader
		
	]
};

关于webpack的插件

需要下载npm install -D html-webpack-plugin
-D表示开发依赖，-S表示生产依赖

1. html-webpack-plugin：简单创建 HTML 文件，用于服务器访问

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

   plugins: [       
   	new htmlWebpackPlugin({             //创建html文件
           filename: 'index.html',         //生成的文件名
           template: './src/index.html'    //借鉴的html
       })
   ]

2. MiniCssExtractPlugin：为每个引入 CSS 的 JS 文件创建一个 CSS 文件

webpack配置module

1. css-loader：读取css文件
2. style-loader：读取到的css模块注入DOM，配合css-loader一起使用
3. babel-loader：将es6 -> es5

babel-core：将js代码分析成AST。

4. url-loader：将文件转换为base64，比如将图片转为base64编码

react使用的语法是jsx，所以浏览器不识别，则需要babel来转为浏览器识别的语法，就需要配置babel
js 需要下载npm i -D babel-core ,babel-loader, babel-preset-react
css 需要下载npm i -D style-loader, css-loader
img 需要下载npm i -D file-loader ，图片变为打包
img也可以使用npm install -D url-loader，图片变为base64编码，可以设置limit来限制小图片进行base64编码，大图片进行文件打包。

module:{
        rules:[
            {
                test: /\.js$/, //匹配js文件
                use: [{
                    loader: 'babel-loader',//引用babel-loader
                    options: { //配置babel
                        presets: ['react']
                    }
                }
                ]
            },
            {
                test: /\.css$/, //匹配css文件
                use: ['style-loader','css-loader'] 
            },
            {
                test: /\.(jpg | png | gif | jpeg $/, //匹配图片
                use: ['file-loader'] 
            }
        ]
}

配置devServer

需要下载npm i -D webpack-dev-server

   devServer: {
        open: true, // 打包后自动打开浏览器
        port: 999   // 更换端口
    }

还需更改package.json中

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --config webpack.config.js",
    "start": "webpack-dev-server --config webpack.config.js"  //webpack.config.js为webpack的配置文件
  },

最终生成的文件不在dist文件中，webpack将打包后的文件直接放入内存。