webpack笔记
webpack学习笔记
1、全局安装
npm install webpack -g
2、作为项目依赖安装
npm install webpack --save-dev
3、安装css-loader、sass-loader、node-scss
npm install css-loader sass-loader node-scss --save-dev
4、webpack配置
// webpack.config.js
var path = require(‘path‘);
module.exports = {
entry:‘js/entry.js‘, //入口文件
output: {
path: path.join(__dirname,‘dist‘),
filename: ‘bundle.js‘
},
module: loaders: [
{
test: /\.css$/,
loaders: [‘style‘,‘css‘]
},
{
test: /\.scss$/,
loaders: [‘style‘,‘css‘,‘scss‘]
}
],
}
5、文件目录
|--webpck
|--dist
|--bundle.js //自动生成
|--scss
|--test.scss
|--css
|--test.css
|--js
|--entry.js
|--test.js
|--webpack.config.js
|--test.html
6、entry.js文件 //entry.js
require(‘../scss/test.scss‘);
require(‘../css/test.css‘);
var test = require(‘test.js‘);
test();
7、test.js文件
// test.js
function app() {
var test = document.getElementById(‘test‘);
test.innerHTML = ‘Hello World!‘;
}
module.exports = app;
8、test.css文件
#test{
height: 400px;
background: #666;
}
9、test.scss文件
$fontsize: 40px;
$color: #FFF;
#test{
font-size: $fontsize;
color: $color;
}
10、test.html文件
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="test"></div>
<script src="dist/bundle.js"></script>
</body>
</html>
时间： 2024-10-14 03:16:48