webpack学习笔记

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack学习笔记相关的知识,希望对你有一定的参考价值。

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>

 

以上是关于webpack学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

webpack 学习笔记

webpack学习笔记--区分环境

webpack学习笔记八

webpack学习笔记

webpackの学习笔记2

webpack学习笔记流行的前端模块化工具webpack初探