1.配置文件的入口与出口

w4默认入口文件 src index.js

　　　　默认输出 dist main.js

自定义入口和出口

const path = require('path')
module.exports = {
    entry: {
        path: path.join(__dirname, './src/index.js')//绝对路径
    },
    output: {
        path:  path.join(__dirname, './dist'),//__dirname当前文件所处的目录
        filename: 'bundle.js' //输出文件名字
}
}

2.自动打包功能

每次修改代码都需要执行打包太麻烦

//自动打包的工具
npm i webpack-dev-server -D

然后修改script下面的dev

webpack-dev-server

修改引用路径 /bundle.js

因为这个工具会把打包生成的文件放在根目录且看不见

3.生成预览页面

npm i html-webpack-plugin -D

const htmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new htmlWebpackPlugin({
    template: './src/index.html',//指定要用到的模板
    filename: 'index.html' //指定生成文件名称。存在内存中 不显示
})
module.exports = {
    plugins:[htmlPlugin] //webpack打包期间会用到的插件
}

上面是写到配置文件中

4.自动打包打开网页

package.json中配置

"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8000"
// open 打包完成后自动打开页面
// host 配置ip地址

5.加载器

5.1 通过 loader 打包非js模块

webpack默认只打包后缀js文件

loader协助webpack打包模块

5.2加载器使用

处理css文件

npm i style-loader css-loader -D

webpack.config文件中配置

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

5.3打包处理less文件(可以嵌套表示)

npm i less-loader less -D

module: {
        rules: [

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

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

6.配置postCSS 自动添加css兼容前缀（浏览器厂商）

npm i postcss-loader autoprefixer -D

创建一个文件 postcss 的配置文件 postcss.config.js

const autoprefixe = require('autoprefixe') //导入插件
module.exports = { plugins: [autoprefixe] //挂载插件
}

然后webpack.config.js中 rules 修改css的loader规则

npm i less-loader less -D
module: {
        rules: [
{test: /\.css$/, use:['style-loader', 'css-loader', 'postcss-loader']}  
{test: /\.css$/, use:['style-loader', 'css-loader','less-loader']} ] }

7.打包样式表中的图片和文字字体

npm i url-loader file-loader -D

npm i less-loader less -D
module: {
        rules: [
{test: /\.css$/, use:['style-loader', 'css-loader', 'postcss-loader']}  
{test: /\.css$/, use:['style-loader', 'css-loader','less-loader']} ] 
{test: /\.jpg/png/gif/bmg/ttf/eot/svg/woff/woff2$/, 
use: 'url-loader?limit=16940'} ] }}//?表示要传参 指定图片大小 单位byte  只有小于limit指定值 才会被转base64图片 大于等于不会转

npm i less-loader less -D
module: {
        rules: [
{test: /\.css$/, use:['style-loader', 'css-loader', 'postcss-loader']}  
{test: /\.css$/, use:['style-loader', 'css-loader','less-loader']} ] 
{test: /\.jpg/png/gif/bmg/ttf/eot/svg/woff/woff2$/, 
use: 'url-loader?limit=16940'} ] }}//?表示要传参 指定图片大小 单位byte  只有小于limit指定值 才会被转base64图片 大于等于不会转

8.打包js中的高级语法

例如 class

bable转换器相关的包

npm i babel-loader  @babel/core @babel/runtime   -D

安装bable语法插件相关的包

npm i  @babel/preset-env @bable/plugin-transform-runtime @babel/pligin-proposal-class-properties -D

然后根目录创建 babel配置文件 babel.config.js

module.exports = {
    presets: [@babel/preset-env] 
plugins:[@bable/plugin-transform-runtime, @babel/pligin-proposal-class-properties] //webpack打包期间会用到的插件 }

然后webpack.config

module: {
        rules: [
{test: /\.css$/, use:['style-loader', 'css-loader', 'postcss-loader']},
{test: /\.css$/, use:['style-loader', 'css-loader','less-loader']},
{test: /\.jpg/png/gif/bmg/ttf/eot/svg/woff/woff2$/, 
use: 'url-loader?limit=16940'} ,
{test: /\.js$/, use:['babel-loader'], exclude:/node_modules/}
] }

webpack part1