标签：执行 single prefix rri new file 引入 deb ext
less ，sass等预处理语言的编译 --浏览器无法识别，需要编译成css才能被识别
less
1、less
2、less-loader
sass
1、sass-loader
2、node-sass
以less为例
rules: [ { test:/\.less$/, use:[ //loader的执行顺序是从后往前的 { loader: ‘style-loader‘, options:{ singleton: true, transform: ‘./transform.js‘ } },{ loader: ‘css-loader‘, options: { module: { localIdentName: ‘[path][name]_[local]_[hash:4]‘ //类名会被编译，起个别名 path-路径 name-文件名 local-本来的类名 } } },{ loader: ‘less-loader‘ } ] } ]
提取css代码 --把css打包成一个单独的文件 extract-text-webpack-plugin
安装对应的插件 --> 改造成loader处的写法 --> 在plugin处添加
--> extract-text-webpack-plugin
--> 引入extract-text-webpack-plugin， 把 user 改成使用extract-text-webpack-plugin
--> 把 extract-text-webpack-plugin加 入 plugin 里
--> index.html 中使用 link 引入 <link rel="stylesheet" type="text/css" href="./src/dist/app.min.css">
var extractTextCss=require(‘extract-text-webpack-plugin‘); module.exports= { module:{ rules: [ { test:/\.less$/, use: extractTextCss.extract({ fallback: { //值为style-loader loader: ‘style-loader‘, options:{ // insertInfo: ‘#mydiv‘, singleton: true, transform: ‘./transform.js‘ } }, use: [ //执行style-loader之前要使用的loader { loader: ‘css-loader‘, options: { // module: true module: { localIdentName: ‘[path][name]_[local]_[hash:4]‘ //类名会被编译，起个别名 path-路径 name-文件名 local-本来的类名 } } },{ loader: ‘less-loader‘ } ] }) } ] }, plugins: [ new extractTextCss({ filename: ‘[name].min.css‘ }) ] }
"browserslist":[ ">1%","last 2 versions" ]
postcss 的插件 自动补充前缀和使用下一个css样式
安装：
cnpm install postcss postcss-loader autoprefixer postcss-cssnext --save
终结版
var extractTextCss=require(‘extract-text-webpack-plugin‘); module.exports= { entry:{ app:"./app.js", }, output:{ path:__dirname+"/src/dist", filename:"./[name].bundle.js" }, resolve:{ alias: { a2:"./js/app2.js", } }, module:{ rules: [ { test:/\.less$/, use:extractTextCss.extract({ fallback:{ loader:‘style-loader‘, options:{ //insertInto:"#mydiv", singleton:true, //transform:"./transform.js" } }, use:[ { loader:‘css-loader‘, options:{ modules:{ localIdentName:‘[path][name]_[local]_[hash:4]‘ } } }, { loader:‘postcss-loader‘, options:{ ident:‘postcss‘, plugins:[ // require(‘autoprefixer‘)({ // ‘overrideBrowsersList‘: [ // ">1%","last 2 versions" // ] // }), require(‘autoprefixer‘)(), //配置公共的了，就不需要再设置 require(‘postcss-cssnext‘)() //使用下一个css ] } }, { loader:‘less-loader‘ } ] }) } ] }, plugins:[ new extractTextCss({ filename:‘[name].min.css‘ }) ] }
标签：执行 single prefix rri new file 引入 deb ext
原文地址：https://www.cnblogs.com/slightFly/p/12293573.html
