Webpack(二)

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Amanda_wmy/article/details/81664326

Webpack

CSS中的图片处理

找到图片后在src目录下新建一个images文件夹，把图片放入images文件夹
在index.html文件中增加一个放置div的标签（需要注意的是这里修改的是src下的index.html文件，不是dist下的，这点新手很容易弄混，要格外注意），代码如下
<div id="tupian"></div>
编写css文件，把你用的图片作为背景显示
#tupian{
background-image: url(../images/manhua.png);
width:466px;
height:453px;
}
编写完成后，我们可以试着用webpack去打包一下。你会发现终端中是报错的

所以要安装file-loader和url-loader安装两个解析图片用的loader
npm install --save-dev file-loader url-loader

• file-loader：解决引用路径的问题，拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。

• url-loader：如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。

• 配置url-loader
  webpack.config.js文件

  //模块：例如解读CSS,图片如何转换，压缩
    module:{
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            },{
               test:/\.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit:500000
                   }
               }]
            }
          ]
    },

• test:/.(png|jpg|gif)/是匹配图片文件后缀名称。
• use(loaders)：是指定使用的loader和loader的配置参数。
• limit：是把小于500000B的文件打成Base64的格式，写入JS
  webpack进行打包

处理HTML中的图片

安装：
npm install html-withimg-loader --save
配置loader:
webpack.config.js
{
test: /\.(htm|html)$/i,
use:[ 'html-withimg-loader']
}

Less文件的打包和分离

• 安装Less服务：
  npm install --save-dev less
• 安装Less-loader用来打包使用：
  npm install --save-dev less-loader
• 写loader配置：
  webpack.config.js

{
    test: /\.less$/,  //切记这里要改为less 或者/\.(less|css)$/
    use: [{
           loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        , {
            loader: "less-loader" // compiles Less to CSS
        }]
}

• 编写一个less文件
  现在webpack的配置好了，我们还需要编写一个less文件，这里明文为black.less.里边只做一件是就是把一个层的背景设置成黑色
  black.less

@base :#000;
#gogo{
    width:300px;
    height:300px;
    background-color:@base;
}

这里#gogo是层的ID名称。@base是我们设置的变量名称
引入到我们entery.js文件中
import less from './css/black.less';
webpack打包

SASS文件的打包和分离

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

注意：在用npm安装时，这个loader很容易安装失败，最好使用cnpm来进行安装。如果你安装一直报错，最好是把node_modules文件夹删除后，再重新安装。

编写loader

{
  test: /\.scss$/,    ///\.(less|css|sass)$/
     use: [{
         loader: "style-loader" // creates style nodes from JS strings
     }, {
         loader: "css-loader" // translates CSS into CommonJS
     }, {
         loader: "sass-loader" // compiles Sass to CSS
     }]
}

编写sass

$nav-color: #FFF;
#nav {
  $width: 100%;
  width: $width;
  height:30px;
  background-color: $nav-color;
}

npm run build打包