前端
一点也不简单

webpack的基本使用

1.webpack安装(推荐全程使用cnpm,因为npm容易出问题)

npm install webpack webpack-cli -g //全局安装
cnpm install webpack webpack-cli -g//推荐
yarn add webpack webpack-cli global
//cli 命令行工具 打包会依赖cli所以我们也安装cli

2.几个相应的命令和知识

前端的工程化工具
– grunt
– 资源打包
– 单元测试
– gulp
– 流式操作工具
– 资源打包
– browserify(webpack前身)
– webpack 【 主流 】

– 资源打包工具, 比如 js文件打包压缩 , img 打包压缩 。。。
– 可以自动解决模块化依赖问题
– es6模块化

 前端的环境
       - 开发环境   localhost:3000
       - 生产环境      
       - 测试环境
       - 预发布环境
       - 上线环境 

        - 开发环境  和 生产环境 都是有前端静态服务器来提供
        - 测试环境   本地客户端服务器提供
        - 预发布和上线环境是  nginx  

查看版本信息: npm info 插件名
取消命令行的黄色警告信息:webpack --mode development

现在更加的应当在webpack.config.js里配置信息

development: 开发环境

production; 生产环境

上面两个环境使我们经常会接触到的

webpack.config.js的一个大致的结构:

/* 
  webpack是一个Node.js的模块化性文件
*/
module.exports = {
  // 入口文件 
   entry:'xxx',//入口文件(相对路径)
  // 出口文件
   output : {//出口文件(磁盘路径)
        path : path.resolve(__dirname,'dist'),
        // filename : 'js/app_[hash].js',//出口中文件的名称
        filename: 'xxx'//hash:num表示截取hash的位数
    },
  // 转换器
   module : {
        rules : [
       {
         nxxxx
       }
   ]
},
  // 插件
  plugins: [
        new 插件实例名({  // Also generate a test.html
          nxxxx
        })
  // 环境配置
  devtool: 'source-map' //错误资源定制,开发环境使用
}

3. webpack.config.js 配置

设置入口和出口(单页面):

entry : './src/index.js',//入口文件(相对路径)
    output : {//出口文件(磁盘路径)
        path : path.resolve(__dirname,'dist'),
        // filename : 'js/app_[hash].js',//出口中文件的名称
        filename: 'js/app.js'//hash:num表示截取hash的位数
    }

设置入口和出口(多页面):

 entry : {//入口文件(相对路径)
      index : './src/index.js',
      app : './src/app.js'
    },
  output : {//出口文件(磁盘路径)
      path : path.resolve(__dirname,'dist'),
      // filename : 'js/[name]_[hash:8].js',//出口中文件的名称
      filename: 'js/[name]_[hash:8].js'//hash:num表示截取hash的位数
    }

转换器: 将某一类型的文件转成另一个类型文件的一个工具,我们常用loader来表示

webpack中 , 所有其他类型文件全部都要js文件

例如css文件转换成js文件

需要安装style-loader和css-loader

cnpm install style-loader css-loader -D
module : {
     rules : [
         //简单的css转换,css样式为内联
         {
         test : /\.css$/,
         use : ['style-loader','css-loader']//顺序:将css转换成js,再将它渲染出去插入到页面,不可以颠倒顺序
        }
       ]
    }

优雅降级

babel使用: ES6->ES5 tracuer babel

需要先安装一下插件

cnpm install babel-loader@8.0.4 @babel/core @babel/preset-env -D

module : {
rules : [
//优雅降级
{
test : /.js$/,
exclude : /node_modules/,//排除
use : [
{
loader : ‘babel-loader’,
options : {
presets : [‘@babel/preset-env’]
}
}
]
},
]
}

css抽离(也是css转成js,但这个css是会在外部的)

需要安装extract-text-webpack-plugin

cnpm i extract-text-webpack-plugin -D
//这样安装得到的是一个3.02的版本的extract-text-webpack-plugin,如果你的webpack版本较高(4.0以上)那么请这样安装
cnpm install extract-text-webpack-plugin@next --D
//这样装就可以得到一个4.0版本的extract-text-webpack-plugin了

注意:这里有个坑非常重要的

需在webpack.config.js中引入

var ExtracTextWebpackPlugin=require('extract-text-plugin')

module中的设置

module : {
         rules : [
             //优雅降级
             {
                 test : /.js$/,
                 exclude : /node_modules/,//排除
                 use : [
                    {
                      loader : 'babel-loader',
                      options : {
                          presets : ['@babel/preset-env']
                      }
                    }
                 ]
             },
         ]
     },

plugins中的设置

plugins:[
        //产出html
        new HtmlWebpackPlugin({
            template: 'index.html',
            filename: './index.html',//默认到output目录
            hash:false,//如果为true防止缓存,会给文件后面加入hash
            minify:{
                removeAttributeQuotes:true//压缩 去掉引号
            }
        }),
        new ExtractTextWebpackPlugin('css/[name]_[hash:6].css')//css外部解析(转换)

    ]

图片打包(即将小于4k的图片转成base64编码)

安装

npm i url-loader file-loader -D
module : {
    rules : [
        {
            test : /\.(png|jpg|gif)/,
            use : [
                {
                    loader : 'url-loader',
                    options : {
                        limit :5000,//字节少于5000 ——》 base64  超过5000  file
                        outputPath : 'img/'
                    }
                }
            ]
        },
    ]
}

图片需要css中引入 | js动态(模块化) 引入

下面是js中动态引入的方法

var imgSrc = require('./img/icon.png') 
var img = new Image()
img.src = imgSrc
document.querySelector('body').appendChild(img)

静态资源拷贝

需要先安装copy-webpack-plugin

cnpm install copy-webpack-plugin

在webpackconfig.js中引入copy-webpack-plugin

const CopyWebpackPlugin = require('copy-webpack-plugin')
plugins: [
        //静态资源拷贝
        new CopyWebpackPlugin([
          {
            from: path.resolve(__dirname,'./src/static'),
            to: path.resolve(__dirname,'./dist/static')
          }
        ])
      ]

文件配置路径别名

webpack.config.js配置

 resolve : {
      alias : {
        // 路径重命名注意:以当前webpack.config.js所在的位置为开始路径
        xyz: path.resolve(__dirname, './src/static/css')
      }
    }

index.js中使用

require('xyz/a.css')

css中自动添加引擎头前缀

先安装

cnpm install postcss-loader autoprefixer -D

预编译sass配置

先安装

cnpm install sass-loader node-sass webpack --D
module : {
        rules : [
            // sass文件的处理
            {
                test: /\.scss$/,
                use: ExtractTextWebpackPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                })
            }
          ]
}

在主文件index.js中引入sass文件

require('./css/index.scss')

预编译less配置

需要安装

cnpm install less less-loader -D
{
   test: /\.less$/,
   use: ExtractTextWebpackPlugin.extract({
   fallback: 'style-loader',
   use: ['css-loader', 'less-loader']
  })
 },

在主文件index.js中引入 less文件

require('./css/index.less')
赞(1) 打赏
未经允许不得转载:专注前端开发和vps技术交流的博客-纸飞机 » webpack的基本使用

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

微信扫一扫打赏