首页 > 代码库 > webpack学习笔记

webpack学习笔记

2024-08-11 10:18:39   214人阅读

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.jsvar 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.jsfunction 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="http://www.mamicode.com/dist/bundle.js"></script></body></html>

 

webpack学习笔记


联系
我们