webpack4搭建 - Githubissues

0、项目搭建

npm init npm i webpack webpack-cli --save-dev

1、webpack核心概念

entry ：用来指定webpack打包的入口

module.exports = {
    entry:'./path/to/my/entry/file.js'
}

output : 用来告诉webpack如何将编译后的文件输出到磁盘

 const path = require('path')
module.exports = {
    entry:'./path/to/my/entry/file.js'，
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

loaders : webpack开箱只支持js和json两种文件类型，通过loaders去支持其他文件类型并且把他们转化成有效的模块，并且可以加载到依赖图中 plugin : 插件用于bundle文件的优化，资源管理和环境变量注入 mode : 用来指定当前的构建环境： production、development或none

2、资源解析

解析es6 安装：npm i @babel/core @babel/preset-env babel-loader -D .babelrc文件：
{
“presets”: [
"@babel/preset-env"
]
}
.webpack.config.js文件
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader'
}
]
}
}
解析jsx 安装： npm i react react-dom @babel/preset-react -D .babelrc文件：
{
“presets”: [
"@babel/preset-env",
"@babel/preset-react"
]
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';

class Index extends React.Component{ render() { return

lalal

} }

ReactDOM.render( , document.getElementById('root') )

>解析css：
css-loader 用于加载.css文件，并且转换成common.js对象
style-loader用于将样式通过《style》标签插入到head中
npm 安装： npm i style-loader css-loader -D

module: { rules: [ { test: /.js$/, use: "babel-loader" },{ test: /\/css$/, use: [ 'style-loader', "css-loader", // 先style-loader再css-loader ] } ] }

>解析less
less-loader用于将less转换成css
npm 安装: npm i less less-loader -D

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

>解析图片
file-loader用于处理文件和处理字体
npm安装 ： npm i file-loader -D

{ test: /.(png|gif|jpg|jpeg)$/, use:'file-loader' }

>其他方式处理图片和字体  ：url-loader
url-loader可以设置较小资源自动base64
url-loader 其实也是基于 file-loader，只不过 url-loader 多了可以自动设置小图片、字体 base64 内联到代码里面的功能。
base64的好处：减少http请求数，优化页面加载性能

{ test: /.(png|gif|jpg|jpeg)$/, use:{ loader: 'url-loader', options: { limit: 10240, // 10k大小，如果图片小于10k那么就base64进去了

                }
            }
        }


>注：要像import styles from ‘./index.less’局部引用的话需要配置：

           {
                    loader: 'css-loader',
                    options: { modules: true }
          },

lizj-core / jtest

webpack4搭建 #1

0、项目搭建

1、webpack核心概念

2、资源解析