webpack初学者系列四：babel + scss

2018-05-31 本文已影响52人细密画红

项目结构

image.png

新建 webpack.config.js

 module.exports={
     entry:'./src/js/app.js'  //webpack分析项目的起点
 }

app.js

//webpack默认是支持ES6的，项目中用babel是因为浏览器没有全面支持，所以我们需要编译。
//.js 是webpack会去自动检测的后缀，不需要手动加
 import {RandomGenerator} from './random-generator';

main.css

// 对比第一张项目结构图，这里我们只需要 import colors, 不是 _colors.scss.
@import "colors";

回到 app.js

/* 
把样式文件 import 到 js 里看起来有点奇怪，但这就是webpack的工作方式。
app.js是 webpack 的 entry ,这里需要引用到所有需要webpack处理的文件。
当然最后这些css代码并不会出现在js文件里。
只要安装了正确的loader,webpack在分析的时候，碰到css代码时，就会用loader把css分离出去。
*/
 import '../css/main.scss';
 import {RandomGenerator} from './random-generator';

回到配置文件 webpack.config.js

 module.exports={
     entry:'./src/js/app.js' ,
     output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
     }
 }

package.json

...
"scripts":{
     "build":"webpack-dev-server"
}
...

到这里，在命令行中运行 npm run build , 会有报错。因为此时 webpack不知道怎么处理 scss。默认情况下，webpack 只知道如何处理 js 文件。所以这里我们需要安装 loader 来处理scss。实际上我们需要更多的 loader。虽然 webpack 支持 es6,但是浏览器没有全面支持，所以我们需要负责编译es6代码的loader。

loaders

npm install 
sass-loader node-sass 
css-loader style-loader extract-text-webpack-plugin 
babel-core babel-loader babel-preset-es2015 
--save

各个包的作用如下：

sass-loader
translate sass to css, sass-loader needs node-sass,which is a package which in the end does the translation.

css-loader
do something with the css we get because we can't handle css in Javascript.

style-loader
inject the css into the head of our page.

extract-text-webpack-plugin
get all the compiled css code and put it into its own file so that we can import a seperate file holding our css code which make sure that it doesn't depend on Javascript getting loaded.

babel-core
basically doing the translation

bebel-loader
just like the node-sass and sass-loader, one does the actual job and the other plucks it into our webpack flow. babel-loader connect to the webpack.

babel-preset-es2015
tell babel which features do you want to be able to compile .

回到webpack.config.js

var path=require('path');
var ExtractTextPlugin=require('extract-text-webpack-plugin');
var extractPlugin=new ExtractTextPlugin({
      filename:'main.css'
});

 module.exports={
     entry:'./src/js/app.js' ,
     output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js',
        publicPath:'/dist'
     },
     module:{
          rules:[
                {
                      test:/\.js$/,
                      use:[
                         {
                              loader:'babel-loader',
                              options:{
                                   presets:['es2015']
                               }
                          } //如果loader不需要配置信息，这里直接可以写成 use:['babel-loader']
                     ]
                },
                {
                   test:/\.scss$/,
                   use:extractPlugin.extract({
                         use:['css-loader','sass-loader']
                   })
                   /*注意，这里需要的不仅仅是处理文件的loader，因为这里我们想把编译过的css代码抽离成独立的文件，只用loader做不到这一点，我们需要用到extract-text-webpack-plugin. 不过这个plugin-in 需要先知道它要抽离的是什么，这一点，是在rules里面决定的。extract-text-webpack-plugin这个插件的使用方式就是在rule里面的use部分使用，并包裹住要使用的loader. 这个地方只是告诉plugin我们想要抽离的内容，真正使用plugin的地方在webpack的plugins属性里，需要在plugins数组里配置。*/
                }
          ]
     },
     plugins:[
          extractPlugin
     ]
 }

index.html

...
 <head>
    <link rel="stylesheet" href="dist/main.css" >
</head>
<body>
     ...
     <script src="dist/bundle.js"></script>
</body>
...

package.json

...
"scripts":{
   "bulid":"webpack-dev-server",
   "build:prod":"webpack -p"
}
...

流程总结

image.png

webpack初学者系列四：babel + scss

项目结构

流程总结

猜你喜欢

热点阅读