webpack初学（一）

webapk初学的配置

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
在这里我简单的介绍一些webpack的配置项
1、安装webpack

	yarn init-y		// 初始化package,json
	yarn add webpack webpack-cli -D		//webpack-cli  命令行工具

安装完成

2、使用webpack 打包

1. 直接使用webpack

	npx webpack --help  // 查看webpack的帮助
	npx webpack --entry ./src/app.js --output ./dist/boundle.js --mode 'development'   //在全局没有安装的情况下，使用npx  --mode 确定生产环境或开发环境

2. 配置文件 webpack.config.dev.js (创建文件 与src 同级)

const path = require('path')
// 添加插件
// 拷贝html 文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
//拷贝 一些 .ico 文件 或者其他文件
const CopyWebpackPlugin = require('copy-webpack-plugin')
//删除文件夹 dist 打包的时候重新创建
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
//加载包 vue-loader  vue-loader/lib/plugin  vue-template-compiler  用来解析.vue文件
const VueLoaderPlugin = require('vue-loader/lib/plugin')
//用于抽离css代码，将代码抽离到一个文件里边
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

//定义一个常量 提取出来，loader 添加使用use的方法 
const loaderUse = (firstLoader) => {
    return [
        {
            loader: MiniCssExtractPlugin.loader,
            options: {
                //css 文件打包到的路径
                publicPath: path.resolve(__dirname, '../dist/styles/'),
                hmr: process.env.NODE_ENV === 'development'
            },
        },
        'css-loader',
        //postcss
        {
            loader: 'postcss-loader',
            options: {
                ident: 'postcss',
                plugins: (loader) => [
                    require('postcss-import')({ root: loader.resourcePath }),
                    require('postcss-preset-env')(),
                    require('cssnano')(),
                    require('autoprefixer')
                ]
            }
        },
        firstLoader,
    ]
}

module.exports = {
    // 定义模式
    mode: 'development',

    // 定义入口
    entry: {
        app: path.resolve(__dirname, '../src/app.js')
    },
    // 定义出口
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'scripts/[name].js'  // 文件名
    },

    //添加vue-loader来解析.vue 文件
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            //可以使用sass  less css 等
            // {
            //     test: /\.scss$/,
            //     loaders: ['style-loader','css-loader','scss-loader']   //loader 执行顺序从后往前执行
            // },

            // {
            //     test: /\.(css|styl)$/,
            //     loaders: ['style-loader','css-loader','stylus-loader']   //loader 执行顺序从后往前执行
            // }
            {
                test: /\.(css|styl)$/,
                use: loaderUse('stylus-loader'),
            },
            {
                test: /\.scss$/,
                use: loaderUse('sass-loader')
            },
        ]
    },


    // 添加插件
    plugins: [

        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.resolve(__dirname, '../public/index.html')
        }),

        // 里边的参数以数组的形式 ，数组里边有对象
        new CopyWebpackPlugin([
            {
                from: path.resolve(__dirname, '../public/favicon.ico'),
                to: path.resolve(__dirname, '../dist/')
            }
            // ......
        ]),
        new VueLoaderPlugin(),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            //将css 代码抽离的时候创建styles文件夹
            filename: 'styles/[name].css'
        }),
    ],

    //添加server
    devServer: {
        contentBase: '../dist',
        host: 'localhost',
        port: 9999,
        open: true     //需要自动打开浏览器是设置
    }
}

3. 实现打包需在 package.json 里边配置

 "scripts": {
    "start": "yarn dev",
    "build": "webpack --config ./config/webpack.config.dev.js",
    "dev": "webpack-dev-server --config ./config/webpack.config.dev.js"
  },

4. 启动

	yarn dev | yarn start  //启动server
	yarn build   //实现打包

总结一下

Entry（入口）：Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
Module（模块）：在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
Chunk（代码块）：一个 Chunk 由多个模块组合而成，用于代码合并与分割。
Loader（模块转换器）：用于把模块原内容按照需求转换成新内容。
Plugin（扩展插件）：在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件，并改变输出结果

autoprefixer使用

在webpack.config.dev.js文件同级目录中，新建postcss.config.js文件，并且添加如下代码

	module.exports = {
    plugins:[
        require('autoprefixer')
    ]
}

现阶段就介绍到这里，后续还会进一步的学习webpack。