webpack01

Posted 672530440

tags:

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo1</title>
</head>
<body>
<!--
webpack打包:
模块化,不可能所有代码写在一个文件,
优化加载速度
使用新的开发模式

webpack特点:
require.js是一个老的打包工具,CommomJs主要用于Nodejs用于后端模块化标准,require.js使用的是AMD标准,
npm是一个最大的模块管理库,从npm上下载,require.js比较老不再适合新的需求。
browserify主要支持npm对AMD不支持,webpack对Commonjs和AMD和ES6的import都可以很好支持的打包工具,browserify只支持js文件打包,webpack可以打包js、css、图片。

webpack同是支持Commomjs和AMD,一切都可以打包,分模块打包。
---->
    <script src="bundle.js"></script>
</body>
</html>

index.js

require(‘./index.css‘);

document.write(‘Hello World!!!!!‘);

index.css

body {
    background: white;
}

package.json

{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --progress --colors"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "0.18.0",
    "style-loader": "0.12.3",
    "webpack": "1.12.1",
    "webpack-dev-server": "1.10.1"
  }
}

webpack.config.js

module.exports = {
    entry: ‘./index.js‘,  //多少页面
    output: {    //最后生成的文件放在哪里
        path: __dirname,    //当前目录下
        filename: ‘bundle.js‘
    },
    module: {    //所有文件都可以看成模块
        loaders: [{        //处理文件
            test: /\.css$/,  //test是检测的意思,检测css结尾的文件,
            loaders: [‘style-loader‘, ‘css-loader‘]    //使用2个loader来处理
        }]
    }
};

 

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

Vue报错:Uncaught TypeError: Cannot assign to read only property 'exports' of object 的解决方法(代码片段

webpack4.0(01.基础配置和初识)

webpack 学习笔记 01 使用webpack的原因

19 01 11 javascript ?????????????????????(???????????????) ??????????????????????????????(代码片段

[linux][c/c++]代码片段01

如何使用webpack加载库源映射?