【前端预备知识】

马丁·路德银

已于 2022-04-17 11:03:54 修改

阅读量868

点赞数

分类专栏： GUI开发文章标签： javascript

于 2022-04-16 10:52:23 首次发布

本文链接：https://blog.csdn.net/weixin_44304929/article/details/124209907

版权

GUI开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

理论

浏览器只能加载HTML文件，根据<script />指定的路径加载JavaScript脚本文件，根据<style/>指定的路径加载CSS文件。
在这里插入图片描述

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hello World</title>
  </head>
  <body>
    <img src="assets/scene.jpg" width="200" height="100"></img>
    <button id="button" width="100" height="100">hello world</button>
  </body>
</html>


<script src="index.js">

</script>

<style>
    @import url(index.css);
</style>

//index.js
document.getElementById("button").addEventListener("click",function(){
    document.getElementById("button").innerText = "clicked";
})

body {
    background-color:#d0e4fe;
}

右击index.html文件，选择用浏览器打开，显示界面如下，点击按钮即可触发脚本。
在这里插入图片描述

webpack

npm init #创建package.json
npm install --save-dev style-loader css-loader 
npm install --save-dev html-webpack-plugin 
npm install --save-dev url-loader
npm install --save-dev babel-loader

const path = require('path') // 引用path模块
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入html-webpack-plugin

module.exports = {  // 这里是commrnt.js语法
    // 入口文件
    entry:"./src/index.js",
    // 打包后的出口文件
    output:{
        // 输出的路径  是绝对路径(导入path模块) 这里是用node来做的
        path:path.resolve(__dirname,'build'),
        // 输出的文件名称
        filename:'build.js',
    },
    module: {
        rules: [  
            {   //使用正则表达式,匹配css结尾的文件
                test: /\.css$/,    
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.scss$/,
                use: [ 
                    'style-loader', 
                    'css-loader', 
                    'sass-loader' 
                ]
            },
            {
				test:/\.(png|jpg|gif)$/i,
				use:[
					{
						loader:'url-loader',
						options:{
							limit:8192
						}
					}
				]
			}
        ]  
    }
    plugins:[
        //复制 './src/index.html'文件,并引入所有资源(JS/CSS)
        new HtmlWebpackPlugin({
			template:'./src/index.html'
		})
    ],  
    // 使用开发模式打包
    mode:"development"
}