webpack 运用第三方库&搭建服务器demo

最新推荐文章于 2022-06-27 14:29:47 发布

hr226

最新推荐文章于 2022-06-27 14:29:47 发布

阅读量120

点赞数

分类专栏： demo 文章标签： webpack—运用第三方库&amp;搭建服务器demo

本文链接：https://blog.csdn.net/hr226/article/details/100804308

版权

demo 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1、使用第三方(JQuery)
2、模块化静态文件(CSS)
3、使用配置文件webpack.config.js
4、使用webpack-dev-server
5、使用babel转换插件

1、npm install jquery --save-dev
2、npm install css-loader style-loader --save-dev
3、webpack
4、npm install -g webpack-dev-server --save-dev
5、npm install babel-core babel-loader babel-preset-es2015 --save-dev
6、npm run build
7、npm start //开启本地服务器

目录树
在这里插入图片描述
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack</title>
</head>
<body>
    <script src="./dist/bundle.js"></script>
</body>
</html>

style.css

body {
    background: skyblue;
}

people.js

// 字符串
// module.exports = "Hello everybody!!!";

//方法 对象
/* function getHello() {
    return "Hello Everyone Welcome to Lanou Class";
}

module.exports = getHello(); */

// es6 数组 对象
let people = [
    {name: "Henry"},
    {name: "Bucky"},
    {name: "Emily"}
];

module.exports = people;

app.js

let people = require('./people.js');
let $ = require("jquery");

// 因为style.css是静态文件，所以引入时需要在文件名前加上修饰!style-loader!css-loader!,但是这样写会比较麻烦，所以有了webpack.config.js文件帮助进行优化
// require("!style-loader!css-loader!./style.css");

// 像上述引入文件及库会比较麻烦，所以有了webpack.config.js文件优化
// 有了webpack.config.js文件后
require("../css/style.css");


// $('body').append("<h1>" + people[0].name + "</h1>");

$.each(people, function(key, value) {
    $('body').append("<h1>" + people[key].name + "</h1>");
})

console.log(people[1].name);

package.json

{
  "name": "webpack-my-app",
  "version": "1.0.0",
  "description": "应用于webpack",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --entry ./src/js/app.js --output-filename ./dist/bundle.js",
    "build": "webpack"
  },
  "keywords": [
    "webpack",
    "打包工具",
    "webpack-dev-server"
  ],
  "author": "hr226",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^3.2.0",
    "jquery": "^3.4.1",
    "style-loader": "^1.0.0",
    "webpack": "^4.40.0",
    "webpack-cli": "^3.3.8"
  }
}

webpack.config.js

module.exports = {
    // 入口文件
    entry: './src/js/app.js',
    // 出口文件
    output: {
        path: __dirname + "/dist", //在当前路径__dirname下，创建一个dist文件夹
        filename: "bundle.js"
    },
    // 需要依赖的插件或者是装载器
    module: {
        rules: [{
            test: /\.css$/,
            loader: "style-loader!css-loader"
        }, {
            test: /\.js$/,
            loader: "babel-loader",
            exclude: /node_modules/,
            options: {
                presets: ["es2015"]
            }
        }]
    }
}

README.md

# 如何将 js 文件进行模块化
	## module.exports require()
	## 自定义文件，引入时需要使用 ./
	## npm 下载的文件，不需要 ./

# 如何使用第三方
	## 1、在 npm 服务器中下载第三方
	## 2、require()第三方

# 如何将静态文件模块化
	## 1、创建 css 文件
	## 2、下载对应的加载器
	## 3、修饰我们的 css 文件 !css-loader

# 如何配置 webpack.config.js
	## 出口文件 入口文件 模块 加载器

# 如何使用 package.json 启动项目
	## scripts "build" "start"

# 如何将 es6 转换为 es5
	## babel babel-core babel-loader...(此处需要注意是否版本冲突)

hr226

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack 运用第三方库&搭建服务器demo

1、使用第三方(JQuery)2、模块化静态文件(CSS)3、使用配置文件webpack.config.js4、使用webpack-dev-server5、使用babel转换插件1、npm install jquery --save-dev2、npm install css-loader style-loader --save-dev3、webpack4、npm install -...
复制链接

扫一扫

专栏目录