美文网首页
webpack4.x入门指南（单页面入口）

webpack4.x入门指南（单页面入口）

作者: 阿尔法乀 | 来源:发表于2019-08-02 18:55 被阅读0次

    webpack 中文文档
    webpack4.x入门配置
    Webpack 4.x 小白成神之路

    1、安装 webpack

    本地安装

    npm install --save-dev webpack webpack-cli webpack-dev-server

    全局安装

    npm install webpack webpack-cli webpack-dev-server -g
    2、构建目录

    首先我们创建一个目录，初始化 npm，然后在本地安装 webpack，接着安装 webpack-cli

    mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

    最后的项目目录


    目录结构
    3、进入到webpack.dev.js文件中进行配置(简单配置)
    const path = require('path');
module.exports = {
    //提供mode配置选项，production || development, production模式下会压缩JS代码
    mode: 'production',  

    //入口文件配置项
    entry:{
        main:'./src/main.js'
    },

    //出口文件的配置项
    output: {
        //打包的路径
        path: path.resolve(__dirname, '../dist'),
        //打包文件名称
        filename: 'static/js/[name].[hash:6].js',  //[name]表示打包名字跟入口名字一致
    },

    //模块：加载 CSS,加载图片,加载字体等
    module:{},

    //插件：目的在于解决 loader 无法实现的其他事。
    plugins:[],

    //配置webpack开发服务功能
    devServer:{

    }
};
    4、package.json配置下命令
    {
  "name": "webpack_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config=config/webpack.config.js",
    "serve": "webpack-dev-server --config=config/webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

    编译：npm run build
    启动服务：npm run serve

    5、设置webpack-dev-server
    devServer:{
        //设置基本目录结构
        contentBase: path.join(__dirname, "../dist"),
        //服务器的IP地址
        host:'localhost',
        //服务端压缩是否开启
        compress: true,
        //端口号
        port: 8000
}
    6、加载css和scss

    添加 style-loader 和 css-loader,sass-loader node-sass

    npm install --save-dev style-loader css-loader sass-loader node-sass

    webpack.config.js中添加

    module:{
    rules:[
        //css/scss loader
        {
            test: /\.(css|scss|sass)$/,
            use: ['style-loader', 'css-loader', 'sass-loader','postcss-loader']
        }
    ]
},
    7、加载图片

    添加 style-loader 和 css-loader

    npm install --save-dev file-loader url-loader

    webpack.config.js中添加

    rules:[
    //图片 loader
    {
       test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,
       use: [
            {
               loader: 'url-loader', //是指定使用的loader和loader的配置参数
               options: {
                  limit: 10000    //是把小于10k的文件打成Base64的格式，写入JS
                  name: '[name]_[hash:7].[ext]', // 打包图片的名字
                  outputPath:'static/images/' // 打包后放到images路径下
               }
           }
      ]
   },
]
    8、HTML文件的创建,清除dist目录文件

    使用 html-webpack-plugin 来创建html页面，并自动引入打包生成的 js 文件
    使用 clean-webpack-plugin 清除出口目录的文件

    npm install --save-dev html-webpack-plugin clean-webpack-plugin

    webpack.config.js的plugins里面进行配置

    const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
plugins:[
    //清除dist目录文件
    new CleanWebpackPlugin(),
    //HTML文件的创建
    new HtmlWebpackPlugin({
        minify:{                               //是对html文件进行压缩
            removeAttributeQuotes:true         //removeAttrubuteQuotes是却掉属性的双引号。
        },
        hash:true,                            //为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
        template:'./public/index.html'       //是要打包的html模版路径和文件名称。
    })
],
    9、分离 CSS和SCSS文件

    添加mini-css-extract-plugin

    npm install --save-dev mini-css-extract-plugin

    webpack.config.js的plugins和module里面进行配置

    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
plugins:[
    //分离css
    new MiniCssExtractPlugin({
        filename: "static/css/[name].[chunkhash:8].css",
    }),
],
module:{
    rules:[
      //css/scss loader
      {
          test: /\.(css|scss|sass)$/,
          use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader','postcss-loader']
      },
  ]
},
    10、图片发布（页面中的img）

    在实际开发中，我们经常用的<img src="xxxx.png"/>的方式引入图片，同样也有相应的loader去处理。

    npm i html-withimg-loader -D

    webpack.config.js中添加

    rules:[
    //页面中的img
    {
       test: /\.(htm|html)$/,
       use: 'html-withimg-loader'
   },
]
    11、自动处理CSS3属性前缀

    为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行

    PostCSS是一个CSS的处理平台，它可以帮助你的CSS实现更多的功能。

    npm i postcss-loader autoprefixer -D

    安装后，在项目根目录下创建一个postcss.config.js文件，配置如下：

    module.exports = {
  plugins: {
    'autoprefixer': {
      "overrideBrowserslist": [
        "last 2 version",
        "> 1%",
        "not ie <= 8"
      ]
    }
  }
}

    webpack.config.js中添加

    plugins:[
    //添加css前缀
    require('autoprefixer'),
]
rules:[
    //css/scss/sass loader
    {
        test: /\.(css|scss|sass)$/,
        use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader','postcss-loader']
    },
]
    13、babel-loader（解析ES6、ES7）
    npm install -D babel-loader @babel/core @babel/preset-env

    webpack.config.js中添加

    module: {
  rules: [
    {
      test:/\.(jsx|js)$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}
    14、resolve解析

    在webpack的配置中，resolve我们常用来配置别名和省略后缀名

    module.exports = {
    resolve: {
        // 省略后缀
        extensions: ['.js', '.json', '.css','.scss']
    },
}

    webpack优化

    待续

    最终代码

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

module.exports = {
    //提供mode配置选项，production || development, production模式下会压缩JS代码
    mode: 'production',  

    //入口文件配置项
    entry:{
        main:'./src/main.js'
    },

    //出口文件的配置项
    output: {
        //打包的路径
        path: path.resolve(__dirname, '../dist'),
        //打包文件名称
        filename: 'static/js/[name].[hash:6].js',  //[name]表示打包名字跟入口名字一致
    },

    //配置别名和省略后缀名
    resolve: {
        extensions: ['.js', '.json', '.css','.scss']
    },
    //模块：加载 CSS,加载图片,加载字体等
    module:{
        rules:[
            //css/scss/sass loader
            {
                test: /\.(css|scss|sass)$/,
                use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader','postcss-loader']
            },
            //图片 loader
            {
                test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: [
                    {
                        loader: 'url-loader', //是指定使用的loader和loader的配置参数
                        options: {
                            limit: 10000,    //是把小于10k的文件打成Base64的格式，写入JS
                            name: '[name]_[hash:7].[ext]', // 打包图片的名字
                            outputPath:'static/images/' // 打包后放到images路径下
                        }
                    }
                ]
            },
            //加载字体
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: ['file-loader']
            },
            //页面中的img
            {
                test: /\.(htm|html)$/,
                use: 'html-withimg-loader'
            },
            //babel-loader 转化es6
            {
                test:/\.(jsx|js)$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },

    //插件：目的在于解决 loader 无法实现的其他事。
    plugins:[
        //添加css前缀
        require('autoprefixer'),
        //清除dist目录文件
        new CleanWebpackPlugin(),
        //HTML文件的创建
        new HtmlWebpackPlugin({
            minify:{                               //是对html文件进行压缩
                removeAttributeQuotes:true,         //removeAttrubuteQuotes是却掉属性的双引号。
                minifyCSS: true,                    // 压缩 HTML 中出现的 CSS 代码
                minifyJS: true,                     // 压缩 HTML 中出现的 JS 代码
            },
            hash:false,                            //为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
            template:'./public/index.html'       //是要打包的html模版路径和文件名称。
        }),
        //分离css
        new MiniCssExtractPlugin({
            filename: "static/css/[name].[chunkhash:8].css",
        }),
    ],

    //配置webpack开发服务功能
    devServer:{
        //设置基本目录结构
        contentBase: path.join(__dirname, "../dist"),
        //服务器的IP地址
        host:'localhost',
        //服务端压缩是否开启
        compress: true,
        //端口号
        port: 8000
    }
};

    相关文章

      网友评论

          本文标题：webpack4.x入门指南（单页面入口）

          本文链接：https://www.haomeiwen.com/subject/ckjldctx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|webpack4.x入门指南（单页面入口）|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！