项目结构
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
网友评论