码迷,mamicode.com
首页 > Web开发 > 详细

webpack 常用的loader

时间:2019-11-10 22:32:05      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:nsf   注意   box   style   init   cli   ons   效果   inactive   

1.npm init 创建一个node的包文件

2.npm install webpack webpack-cli -g  全局安装不推荐


3.npx webpakc -v 查看webpack的版本号   npx 实在当前项目的node_modules里面查找,npm  是在全局查找

4.npm info webpack 可以查看所有的webpack的包

5.npm install webpack@4.16.6 webpack-cli -D  安装指定版本

6.默认webpack 打包寻找的配置文件是webpack.config.js 如果想更改文件夹名字:npx webpack --config webpack.js(这是需要更改文件夹的名字)

常用的loader插件webpack.config.js配置,注意插件是从上到下,从左到右执行

   const path = require(‘path‘)
   module.exports = {
    mode:‘development‘,
    entry:‘./src/index.js‘,
    module:{
        rules:[
            {
                test:/\.(jpg|png|gif)$/,
                use:{
                    loader:‘file-loader‘,
                    options:{
                        name:‘[name].[ext]‘,
                        outputPath:‘images/‘
                    }
                }
            },
            {
                test:/\.css$/,
                use:[‘style-loader‘,‘css-loader‘,‘postcss-loader‘]
            },
            {
                test:/\.scss$/,
                use:[‘style-loader‘,‘css-loader‘,‘sass-loader‘]
            }
        ]
    },
      output:{
        filename:‘bound.js‘,
        path:path.resolve(__dirname,‘dist‘)
     }

    }
 
2.postcss-loader 用来给添加厂商前缀的 ,需要安装在根目录下添加postcss-config.js的配置文件   npm install autoprefixer -D 
   postcss-config.js 配置:
   module.exports ={
    plugins:require(‘autoprefixer‘)
   }
  效果如下:
 
  1. -webkit-transform: translate(100px,100px);
  2. transform: translate(100px,100px);

  



 

webpack 常用的loader

标签:nsf   注意   box   style   init   cli   ons   效果   inactive   

原文地址:https://www.cnblogs.com/huanhuan55/p/11832014.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!