webpack 4.0 学习笔记（一）

1.webpack可以做哪些事儿

　　代码的转换，文件的优化，代码的分割，模块的合并，代码的校验，自动更新，自动发布，等等。

2.安装webpack

　npm init  新建项目


　npm install webpack webpack-cli -D  

　

3.简单配置，运行webpack，查看打包是否正确

const path = require('path');

module.exports = {
    mode: 'development', // 模式 默认两种 production 生产 development 开发
    entry: './src/index.js', // 入口文件
    output: {
        path: path.resolve(__dirname, 'dist'), // 打包后输出文件，在当前目录下新建一个dist 文件夹 必须是绝对路劲
        filename: 'index.js' // 打包后的文件夹
    }
}

 package.json

{
  "name": "weppack-dome",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack --config webpack.config.js" // --config 添加参数，运行哪个文件下的配置
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.34.0",
    "webpack-cli": "^3.3.4"
  }
}

运行 npm run build

4.使用webpack-dev-server 构建一个简单的web服务器，能实现修改代码后自动刷新

　　 npm i webpack-dev-server -D

　　package.json

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server --open" // 添加启动服务的命令 --open 自动打开浏览器
  },

测试用在dist文件夹新建index.html 文件  引入打包之后的index.js 查看8080窗口是否能正常启动，并弹出helloworld 和 hello webpack  

运行 npm run build (先打包) 在启动服务 npm run dev  能出现以下页面

在测试阶段dist内要提前新建好index.html文件 用于引入我们build之后的js,实际项目中不会这么做，下面来解决这个问题

5.使用 HtmlWebpackPlugin 插件来解决问题

　　简化了每次创建html，会随着编译而变化的html

　　npm i html-webpack-plugin -D 安装插件

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

module.exports = {
    mode: 'production', // 模式 默认两种 production 生产 development 开发
    entry: './src/index.js', // 入口文件
    output: {
        path: path.resolve(__dirname, 'dist'), // 打包后输出文件，在当前目录下新建一个dist 文件夹 必须是绝对路劲
        filename: 'index.[hash:8].js' // 打包后的文件夹 添加8位的
    },
    devServer: { // web开发服务器的配置
        port: 8080, // 指定开启的端口
        progress: true, // 展示进度条
        contentBase: path.resolve(__dirname, 'dist'), //默认是以当前目录下开启静态服务，指定开启服务的文件夹
    },
    plugins: [ // 数组 放置插件
        new HtmlWebpackPlugin({
            hash: true, // 添加hash值
            template: path.resolve(__dirname, 'src/index.html'), // 模板的位置
            filename: 'index.html', // 输出文件名
            title: 'webpack-dome', // 生成HTML的标题
            minify: { // 代码压缩配置
                removeAttributeQuotes: true, // 把html 文件双引号去掉
                collapseWhitespace: true, // html文件引用的js添加hash值
            }
        })
    ]
}

6.添加css-loader

　　 npm i style-loader csss-loader -D

　　

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

module.exports = {
    mode: 'production', // 模式 默认两种 production 生产 development 开发
    entry: './src/index.js', // 入口文件
    output: {
        path: path.resolve(__dirname, 'dist'), // 打包后输出文件，在当前目录下新建一个dist 文件夹 必须是绝对路劲
        filename: 'index.[hash:8].js' // 打包后的文件夹 添加8位的
    },
    devServer: { // web开发服务器的配置
        port: 8080, // 指定开启的端口
        progress: true, // 展示进度条
        contentBase: path.resolve(__dirname, 'dist'), //默认是以当前目录下开启静态服务，指定开启服务的文件夹
    },
    module: { //模块
        rules: [ // 规则
            {
                test: /.css$|.styl$/,
                use: [ // 多个loader用数组，按顺序执行,配置单个loader用对象
                    {
                        loader: 'style-loader'  // 把css文件插入到head的标签中
                    },
                    'css-loader', // 解析@import 语法，把css 文件中引入css的文件
                ]
            }
        ]
    },
    plugins: [ // 数组 放置插件
        new HtmlWebpackPlugin({
            hash: true, // 添加hash值
            template: path.resolve(__dirname, 'src/index.html'), // 模板的位置
            filename: 'index.html', // 输出文件名
            title: 'webpack-dome', // 生成HTML的标题
            minify: { // 代码压缩配置
                removeAttributeQuotes: true, // 把html 文件双引号去掉
                collapseWhitespace: true, // html文件引用的js添加hash值
            }
        })
    ]
}

 

成功耶，更改配置文件要重新启动服务！有时候要自己更改css样式，会直接写一个标签，但是自己写的标签层级会比引入的低

在webpack.config.js 内更改配置

use: [ // 多个loader用数组，按顺序执行,配置单个loader用对象
                    {
                        loader: 'style-loader',  // 把css文件插入到head的标签中
                        options: {
                            insertAt: 'top' // 添加的位置在上面，方便自定义其他的css 样式
                        }
                    },
                    'css-loader', // 解析@import 语法，把css 文件中引入css的文件
                ]

成功 yep!

7.安装stylus loader 

 npm i stylus stylus-loader -D

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

module.exports = {
    mode: 'production', // 模式 默认两种 production 生产 development 开发
    entry: './src/index.js', // 入口文件
    output: {
        path: path.resolve(__dirname, 'dist'), // 打包后输出文件，在当前目录下新建一个dist 文件夹 必须是绝对路劲
        filename: 'index.[hash:8].js' // 打包后的文件夹 添加8位的
    },
    devServer: { // web开发服务器的配置
        port: 8080, // 指定开启的端口
        progress: true, // 展示进度条
        contentBase: path.resolve(__dirname, 'dist'), //默认是以当前目录下开启静态服务，指定开启服务的文件夹
    },
    module: { //模块
        rules: [ // 规则
            {
                test: /.css$/,
                use: [ // 多个loader用数组，按顺序执行,配置单个loader用对象
                    {
                        loader: 'style-loader',  // 把css文件插入到head的标签中
                        options: {
                            insertAt: 'top' // 添加的位置在上面，方便自定义其他的css 样式
                        }
                    },
                    'css-loader', // 解析@import 语法，把css 文件中引入css的文件
                ]
            },
            {
                test: /.styl$/,
                use: [ // 多个loader用数组，按顺序执行,配置单个loader用对象
                    {
                        loader: 'style-loader',  // 把css文件插入到head的标签中
                        options: {
                            insertAt: 'top' // 添加的位置在上面，方便自定义其他的css 样式
                        }
                    },
                    'css-loader', // 解析@import 语法，把css 文件中引入css的文件
                    'stylus-loader' // 解析 stylus语法
                ]
            }
        ]
    },
    plugins: [ // 数组 放置插件
        new HtmlWebpackPlugin({
            hash: true, // 添加hash值
            template: path.resolve(__dirname, 'src/index.html'), // 模板的位置
            filename: 'index.html', // 输出文件名
            title: 'webpack-dome', // 生成HTML的标题
            minify: { // 代码压缩配置
                removeAttributeQuotes: true, // 把html 文件双引号去掉
                collapseWhitespace: true, // html文件引用的js添加hash值
            }
        })
    ]
}

新建styl文件 里面写css样式 在index.js 引入

　页面会出现一个宽和高都为500的盒子 并且居中哦！

8.安装插件 把css样式抽离出去

现在都是混合写在style标签内 ，抽离成外链式的

 npm i mini-css-extract-plugin -D

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const  MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
    mode: 'production', // 模式 默认两种 production 生产 development 开发
    entry: './src/index.js', // 入口文件
    output: {
        path: path.resolve(__dirname, 'dist'), // 打包后输出文件，在当前目录下新建一个dist 文件夹 必须是绝对路劲
        filename: 'index.[hash:8].js' // 打包后的文件夹 添加8位的
    },
    // devServer: { // web开发服务器的配置
    //     port: 8080, // 指定开启的端口
    //     progress: true, // 展示进度条
    //     contentBase: path.resolve(__dirname, 'dist'), //默认是以当前目录下开启静态服务，指定开启服务的文件夹
    // },
    module: { //模块
        rules: [ // 规则
            {
                test: /.css$/,
                use: [ // 多个loader用数组，按顺序执行,配置单个loader用对象
                    // {
                    //     loader: 'style-loader',  // 把css文件插入到head的标签中
                    //     options: {
                    //         insertAt: 'top' // 添加的位置在上面，方便自定义其他的css 样式
                    //     }
                    // },
                    MiniCssExtractPlugin.loader,
                    'css-loader', // 解析@import 语法，把css 文件中引入css的文件
                ]
            },
            {
                test: /.styl$/,
                use: [ // 多个loader用数组，按顺序执行,配置单个loader用对象
                    // {
                    //     loader: MiniCssExtractPlugin.loader,  // 把css文件插入到head的标签中
                    //     options: {
                    //         insertAt: 'top' // 添加的位置在上面，方便自定义其他的css 样式
                    //     }
                    // },
                    MiniCssExtractPlugin.loader,
                    'css-loader', // 解析@import 语法，把css 文件中引入css的文件
                    'stylus-loader' // 解析 stylus语法
                ]
            }
        ]
    },
    plugins: [ // 数组 放置插件
        new HtmlWebpackPlugin({
            hash: true, // 添加hash值
            template: path.resolve(__dirname, 'src/index.html'), // 模板的位置
            filename: 'index.html', // 输出文件名
            title: 'webpack-dome', // 生成HTML的标题
            // minify: { // 代码压缩配置
            //     removeAttributeQuotes: true, // 把html 文件双引号去掉
            //     collapseWhitespace: true, // html文件引用的js添加hash值
            // }
        }),
        new MiniCssExtractPlugin({
            filename: 'main.css'
        }),
        new CleanWebpackPlugin() // 清楚打包文件下的内容
    ]
}

9.安装添加浏览器前缀

　　npm i postcss-loader autoprefixer -D

rules: [ // 规则
            {
                test: /.css$/,
                use: [ // 多个loader用数组，按顺序执行,配置单个loader用对象
                    MiniCssExtractPlugin.loader,
                    'css-loader', // 解析@import 语法，把css 文件中引入css的文件
                    {    //浏览器兼容
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('autoprefixer') /*在这里添加*/
                            ]
                        }
                    }
                ]
            },

 10.添加css 压缩

　　npm install mini-css-extract-plugin optimize-css-assets-webpack-plugin terser-webpack-plugin -D

　　在webpack.config.js 引入

optimization: {
        minimizer: [
            new TerserJSPlugin({}), // 压缩js
            new OptimizeCSSAssetsPlugin({}) // 压缩css
        ]
    },

11.添加babel转换js

　　npm install babel-plugin-dynamic-import-webpack  babel-loader @babel/core @babel/preset-env -D

　　

rules: [ // 规则
            {
                test: /.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                ]
            },
      ....  
]    

在改项目根目录添加 .babelrc //解决import语法不能识别问题