从0开始手工搭建webpack项目

     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

 

7,index.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文件等，项目会自动及时编译，浏览器会自动刷新页面。