webpack429x成神之路八-使用loader之打包样式下

目录

上节：使用loader之打包样式上

目录结构如下：

postcss

PostCSS 是一个允许使用 JS 插件转换样式的工具。 这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins， 编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。截止到目前，PostCSS 有 200 多个插件。[官方传送门][3]

这里就示范其中一个添加浏览器前缀的插件：autoprefixer

首先浏览器运行上节打包后的代码，即bundles/index.html查看图片样式：

现在css3没有加浏览器前缀，利用autoprefixer可轻松解决这一问题，不需要自己手动添加。
首先修改配置;
webpack.config.js:

// 省略{  test: /\.css$/,  use: ['style-loader', {        loader: 'css-loader',        options: {        // 开启模块化        modules: true    }  }, 'postcss-loader']}// 省略

这样css会先经过postcss-loader处理。
然后安装插件：npm i postcss-loader autoprefixer -D

再到根目录下新建postcss.config.js，并添加如下代码：

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

然后npm run build，运行打包后的代码，这时应该自动加上前缀了

这些postcss的插件各自都有自己的配置，详细使用可参考官网：https://github.com/postcss/au...
for example:

module.exports = {    plugins: [        require('autoprefixer')({            "browsers": [                "defaults",                "not ie < 11",                "last 2 versions",                "> 1%",                "iOS 7",                "last 3 iOS versions"            ]        })    ]};

使用预处理器

这里以less为例：
修改配置webpack.config.js:

// 省略{  test: /\.less$/,  use: ['style-loader', {        loader: 'css-loader',        options: {        // 开启模块化        modules: true    }  }, 'postcss-loader', 'less-loader']}// 省略

安装依赖：npm i less-loader less -D

修改后缀，src/styles/index.less，
修改内容index.less：

@w: 350px;@h: 300px;.pic{  width: @w;  height: @h;  transform: translateX(300px);}

src/index.js中的引入也要改：

import pic from './images/cover.png';// 模块化引入import indexStyle from './styles/index.less';window.addEventListener('DOMContentLoaded', function() {  const root = document.getElementById('root');  const img = new Image();  img.src = pic;  img.classList.add(indexStyle.pic);  root.appendChild(img);});

npm run build,运行打包后的代码，效果应该和之前一样。

less同样也有很多配置，官网传送

下节：webpack-dev-server上（待更新）