从0开始手工搭建webpack项目

最新推荐文章于 2023-03-10 16:27:11 发布

Ethiopia1024

最新推荐文章于 2023-03-10 16:27:11 发布

阅读量1.2k

点赞数

分类专栏： html/xml/javaScript/css node/express/react/webpack

本文链接：https://blog.csdn.net/Cinderella___/article/details/81087158

版权

html/xml/javaScript/css 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

node/express/react/webpack

10 篇文章 0 订阅

订阅专栏

webpack的工作方式是：通过一个配置文件找到入口文件，从这个入口文件找到你项目依赖的所有资源文件，使用对应的资源加载器(loaders)来处理这些资源文件，最后打包成静态文件。

1，安装webpack

//全局安装的作用是直接在命令行中使用
npm install -g webpack
//安装到项目目录，使用webpack的功能
npm install --save-dev webpack

2,使用webpack:

在开始上手项目之前首先来搭建我们的目录结构

例如搭建目录结构如下：

3，package.json文件使用 npm init 命令可以自动生成。

4，编写核心配置文件——webpack.config.js文件

var webpack = require('webpack');
var path = require('path');
module.exports = {
    entry: __dirname + "/public/javascript/main.js",//唯一入口文件
    output: {
        path: __dirname + "/public",//打包后的文件存放的地方
        
        filename: '[name].bundle.js',//打包后的文件名
        // path: path.resolve(__dirname, 'build'),//用path的resolve方法进行解析
        // publicPath: './build/'//打包后文件存放的路径
    },
    devtool: 'eval-source-map',//生成后的代码 - 每个模块相互分离，并用模块名称进行注释
    devServer: { //让浏览器监听你的代码的修改，并自动刷新显示修改后的结果
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    },
    module: {//module属性主要存放解析资源文件的各个加载器，每一个对象表示了一个加载器
        rules: [
            {
                test: /(\.jsx|\.js)$/,//test属性表示正则匹配，用来匹配文件的后缀名
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true, // 指定启用css modules
                            localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
                        }
                    }
                ]
            }
        ]
    }
};

4（可选），使用webpack构建本地服务器

如果想让浏览器监听你的代码的修改，并自动刷新显示修改后的结果

npm install --save-dev webpack-dev-server

5，编写入口文件 (这里我写的是一个简单的登录功能，登录验证状态在控制台输出)

在/public/javascript/目录下，编写入口文件main.js:

import Users from './Users'; //导入数据类

let data = new Users();
let btn = document.getElementById('btn');
btn.onclick = function(){
    let nameValue = document.getElementById('username').value;
    let pwdValue = document.getElementById('password').value;

    let user = data.findUserByUserName(nameValue);
    if( user == null ){ //用户名不存在 
        console.log("用户名不存在");
    }
    else {//用户名存在
        if(pwdValue != user.password){//密码错误
            console.log("密码错误");
        }else{//登录成功
            console.log("登录成功");
        }
    }
}

6，编写模块文件:

在/public/javascript/目录下，编写登录的数据文件Users.js:

//存储静态数据的类
class Users{
    constructor(){
        this.users = [
            {
                "username":"user1",
                "password":"pwd1"
            },
            {
                "username":"user2",
                "password":"pwd2"
            }
        ];
    }
    findUserByUserName(username){
        for(let i = 0;i<this.users.length;i++){ 
            if(username == this.users[i].username){
                return this.users[i];
            }
        }
        return null;
    }
}
export default Users;

7,index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div>
        <div id='root'></div>
        <form action='#' method="POST">
            <table>
                <tr>
                    <td>用户名：</td>
                    <td><input type="text" name="username" id="username"></td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td><input type="password" name="password" id="password"></td>
                </tr>
                <tr>
                    <td><input type="button" name='btn' id='btn' value="提交" col-span='2'></td>
                </tr>
            </table>
        </form>
    </div>
    <script src="main.bundle.js"></script>
  </body>
</html>

现在项目目录如下所示：

8,安装babel及转码规则，将ES6的语法编译为ES5的语法：

// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

9，此时命令行进入该项目根目录，输入 npm run server命令，会问你

然后项目启动，浏览器输入：http://localhost:8080/ 可以看到效果

另外，控制台也打印了验证对应的提示消息

由于以webpack-dev-server启动的，如果修改了对应的js文件等，项目会自动及时编译，浏览器会自动刷新页面。

Ethiopia1024

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
从0开始手工搭建webpack项目

webpack的工作方式是：通过一个配置文件找到入口文件，从这个入口文件找到你项目依赖的所有资源文件，使用对应的资源加载器(loaders)来处理这些资源文件，最后打包成静态文件。1，安装webpack//全局安装的作用是直接在命令行中使用npm install -g webpack//安装到项目目录，使用webpack的功能npm install --save-dev ...
复制链接

扫一扫